Front-End Insights

Font Awesome content codes – avoid using “i” tag


Do you know Font Awesome? I’m certain many of you do… and, if not, it’s worth to familiarise yourself with it! Just to be sure, it’s a library which allows us to add various types of icons which are really… “awesome” 🙂 In general, to render these icons, Font Awesome uses just fonts (that’s where the name of the library comes from) and CSS so they scale beatifully. The full list of icons is available under this link. Today I will show you how to use the Font Awesome content codes if don’t want to (or can’t) use it in a regular way.

Ok, before we start, I have to add how to insert an icon to a site:

<i class="fa fa-hand-peace-o"></i>

So if we want to add an icon, we just have to add the i element and then decorate it with certain CSS classes. In this particular case we can expect the result as follows:

font awesome - efekt

Of course we can freely adjust parameters of the icon (e.g. its size) by changing CSS attributes just like if they were regular fonts.

Alright! It’s time to get to the point… What if we don’t want, or more often can’t, insert such a tag to the website or use the same CSS classes on a different element (this way it works too) because, for example, we want to add the icon to the code which is generated by some jQuery plugin? Well, in this case, we are forced to tweak a little bit in CSS and write something like this:

See the Pen BNMvgq by burczu (@burczu) on CodePen.0

In the example above, we created a completely new span element and added a completely new CSS class custom-fa to it so that, as a result, we received exactly the same icon as before – the key here lies in the use of the pseudo-class before and setting the content parameter. Certainly by now, you can guess that it’s done in exactly the same way inside the default Font Awesome CSS classes! The full list of all available Font Awesome content codes can be found here. However, if you are looking for a compendium of knowledge of the attribute, it can be found under this link.

That’s all for today. I think the above example of using the Font Awesome content codes can be useful sometimes, especially that Font Awesome is really popular these days…