New Font Awesome Icons in Quick Reply Editor


 
Thread Tools Search this Thread
Top Forums Web Development New Font Awesome Icons in Quick Reply Editor
# 1  
Old 12-07-2018
New Font Awesome Icons in Quick Reply Editor

Working on the Quick Reply Editor, I have replaced a number of icons (see image below) with Font Awesome Icons. Was planning to replace all of them, but for some reason, replacing a few of them causes the script / template to break (which is odd) so I left them for now.

Image

The tooltips work better with Font Awesome than with images, so I hope to replace all of them at some point in time.

I'll probaly have to rewrite the PHP code for the custom icons like code, icode, and noparse tags to them them to work with Font Awesome.
# 2  
Old 12-07-2018
Update: Was able to get the ICODE tag to work using Font Awesome in the Quick Reply Editor. Also, removed the PHP code tag in the QRE.

TODO: Need to change the "advanced" and "edit post" editors....
# 3  
Old 12-07-2018
Update: Was able to find an acceptable NOPARSE font Font Awesome in the Quick Reply Editor.

TODO: Need to change the "advanced" and "edit post" editors.... Will do this TODO after the QRE is done.
These 4 Users Gave Thanks to Neo For This Post:
# 4  
Old 12-08-2018
OK... I found out why I cannot change a few of the icons without breaking things

The original code for the quick editor does a string match on a couple of the HTML strings that represent the original icons. If I change the icon code, the toolbar breaks. This string match is used to insert addition custom icons after the match icon strings.

This is not a problem but I will need to write the PHP code to do a string match using some other string. So my TODO list has increased regarding cleaning up these editors.

Cheers.
# 5  
Old 12-14-2018
OK... I wrote the PHP code and was able to replace two more editor toolbar images with Font Awesome icons (getting round the issues with the original QRE plugin code). The main icon left to do is the "code tag" icon, but I'm not inclined to replace that one yet, since:
  1. it is not easy to find a replacement; and
  2. it is also embedded into may "info" and "hint" areas of the site.

Next, when I have time, I'll transfer and test the same icon changes for the "advanced " editor to make the icons consistent across various site editors.
This User Gave Thanks to Neo For This Post:
# 6  
Old 12-14-2018
I took a new look at Font Awesome, and I think I have a good way forward for the code tags icons (block and inline code tags):
  1. Replace the main code tag icon "code" with Font Awesome (fas fa-code); and,
  2. Replace the inline code tag icon with Font Awesome (fas fa-terminal).

References:
  1. fas fa-code :Font Awesome
  2. fas fa-terminal : Font Awesome

These are the best choices from the FA icons, as far as I can see (easiest to read, etc).
# 7  
Old 12-14-2018
Update.

Harmonized the QRE Font Awesome icons with the "Advanced Editor".

Image

Also, worked on the same editor to get the font color picker to work in the AAEPE (Advanced and Edit Post Editor) (no joy yet) and to get the attachments to work in QRE (no joy yet). I think the issue is in the two different javascript files used for these two editors. Will need to look deeper into the JS code for these editors. Disabled the PHP and HTML bbcode in the advanced editor since they are mostly misused and we don't need the syntax highlighting for PHP and HTML. The basic code tags work well enough.

The main difference in the two editors are:
  1. Color Picker works in QRE but not in the AAEPE.
  2. Attachments work in the AE but not in the QRE.
  3. AE has post preview mode.


TODO:
  • Swap the ICODE icon with the CODE gif and add new fa-terminal FA icon for ICODE.
  • Replace code.gif icon with a screenshot of the new CODE icon for hints and directions.
  • Maybe reorder the AAEPE icons to match the QRE order to be consistent.
  • Look into fixing the conflicts or missing functions between the JS code for both editors.

EXTRA TODOs
  • Create a Bootstrap modal for the editor which explains how to use the two code tags (popup information modal)
  • Try to get the "upload attachment modal" I wrote to work 100% (not yet available to the site).
This User Gave Thanks to Neo For This Post:
Login or Register to Ask a Question

Previous Thread | Next Thread

6 More Discussions You Might Find Interesting

1. What is on Your Mind?

New CODE and ICODE Editor Button Icons

As promised, I have changed the CODE tag icon and the ICODE tag icon in our WYSIWYG editors to use Font Awesome. CODE Tag = fa-code ICODE Tag = fa-terminal https://www.unix.com/members/1-albums215-picture966.png The reason for this change is to continue our move toward Font Awesome... (4 Replies)
Discussion started by: Neo
4 Replies

2. What is on Your Mind?

Quick Update on UNIX.COM Site Renovation: Bootstrap, Font Awesome and jQuery

Here is an update on the site renovation: After a lot of analysis and example programming, including testing out a number of Javascript framework and libraries, in the short term, we are getting the most bang-for-the-buck from these three basic, core tech areas: Bootstrap (CSS and... (2 Replies)
Discussion started by: Neo
2 Replies

3. What is on Your Mind?

New Mobile Navbar Icons from Font Awesome

Just changed the mobile site to use Font Awesome icons. Here is the new top navbar view (unregistered users) https://www.unix.com/members/1-albums214-picture903.jpeg (2 Replies)
Discussion started by: Neo
2 Replies

4. What is on Your Mind?

Small bug in the Quick Editor function in postbit

Hey, There was a small bug in the Quick Editor function in postbit, but I fixed it (basically a double quote was missing from an element id): <div id="post_message_$post" class="neo-message-area">$post</div> Was <div id="post_message_$post class="neo-message-area">$post</div> Should... (1 Reply)
Discussion started by: Neo
1 Replies

5. What is on Your Mind?

New Icons Coming from Font Awesome

Finally making some progress on getting rid of the 10 year old buttons with modern day fonts and icons thanks to a responsive web design tutorial by Brad Traversy who's video pointed me to Font Awesome. The buttons and icons were pretty easy to implement but it too me a number of hours... (39 Replies)
Discussion started by: Neo
39 Replies

6. What is on Your Mind?

New jQuery to view Post Icons in Editor

I was reformatting the "advanced" WYSIWYG editor with bootstrap css and while there made the post icons to be invisible by default; so if you click on the text below the editor: Post Icons - Click to view the full list of message icons to add to your post: ... (0 Replies)
Discussion started by: Neo
0 Replies
Login or Register to Ask a Question