fontAwesome easy

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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">
  <ul>
    <li>&#xf015; Home</li>
    <li>&#xf007; About me</li>
    <li>&#xf040; Contact me</li>
  </ul>
</div>

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?