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:
Thanks for that article and your amazing blog!
I often use fontello (fontello.com) or icomoon (icomoon.io) to create a custom font icon. It's lighter than the entire Font-awesome package, and you can use your own SVG paths. You can easily include the css piece of code in your DesignManager stylesheets.
Font Awesome symbols aren't images, so I don't understand why CGSmartImage could conflict in your website...
I use something very similar to great effect in many of my websites. It gets a little wonkey when you add this in content and you have CGSmartImage parsing entire content sections, but other than that it's great!