fontAwesome easy

The easy way to use fontAwesome

Personally I really like FontAwesome: it is really helpful! The canonical method, according to the official documentation, is this:

  1. link the CDN or the file in you asset as a css library link
  2. use inside the html the i tag:
<i>fa fa-something-code</i>

and it is done!

But …

What if you have a lot icons to insert inside your project? Could be boring to death using over and over again theitag inside thehtml! For this reason I love to use this “easy way”:

  • do the same as the step number one
  • insert in yourbody tagthe code below (you may use a different font inside each class):
font-family: 'your-favourite-font', fontAwesome, sans-serif;
  • use the cheatsheet code with format&#xf015;needed that you can get from cheatsheet code list. Add in your html and you will get the same result.

For example if I have to add some icons to my menu I can do that in my html:

<div class="nav simple-way">
    <li>&#xf015; Home</li>
    <li>&#xf007; About me</li>
    <li>&#xf040; Contact me</li>

and I only need the previous code inside my css:

font-family: 'you-favourite-font', fontAwesome, sans-serif;

And is done as you can see in my following pen:

See the Pen An easy way to use fontAwesome by Massimiliano Ranauro (@huckbit) on CodePen.

isn’t it really cool?

Do you like this methodology or you have some other tip to share?

Leave a comment or contact me via Twitter @huckbit

comments powered by Disqus

Related Posts