The popular Font Awesome gives you scalable vector icons that can instantly be customized - size, color, drop shadow, and anything that can be done with CSS.
You can place Font Awesome icons by using HTML code like:
In WYSIWYG editors the code can be difficult to add, and when having multiple icons in a (module) template it might be a bit confusing... Solution: a simple User Defined Tag!
Add to the <head></head> area of your Core::Page template a reference to the Font Awesome CDN file:
Create a UDT named "fa":
Now you can use in your templates and content editor:
Just the icon code (and if necessary parameters) is enough.
Note: For web accessibility aria-hidden="true" is set by default to hide icons used purely for decoration for visitors using screen readers. Do you want to disable this, add the ariahidden parameter (no dash):
Tip: Here is a Font Awesome Cheatsheet
Will output the Font Awesome logo:
Will output a large cup of coffee:
I like coffee! Click here to buy me one
Bootstrap themes often include Font Awesome icons, but there is one difference! The classes don't start with fa but with icon... You still can use this method, but change the UDT name and all references in the UDT code and Smarty tags from fa to icon! Tag example: