For this tutorial I will choose the font ‘Font Awesome’ designed by Dave Gandy. Click the large button at the bottom that says: To Collection.
Once you have done that, select the second top button from the left. This will make you scroll down to the code.
Add it to site
Like you can see on the image, it will also genarate a code. The code should look something like this:
1
2
3
4
5
6
| /* fontawesome */[class*="fontawesome-"]:before { font-family: 'FontAwesome', sans-serif;} |
Just must place this code at the top of your CSS stylesheet. Otherwise it might not work.
Call it inside your theme
Adding it is really simple. Just click the icon you want to add at the site, now somewhere at the uppercorner will show the code.
You can add it by adding a ‘class’ to an element. I personally recommend using the ‘span’ tag for the icons.
1
2
3
4
5
6
| <b class="fontawesome-heart"></b><span class="fontawesome-heart"></span><div class="fontawesome-heart"></div><p class="fontawesome-heart"></p><aside class="fontawesome-heart"></aside>// And so on... |
Labels: Tutorials