[CSS Icons] How to use Font Awesome on your website!

Aeux · 01-10-2015, 09:35 PM

What's Font Awesome?
Font Awesome gives you scalable vector icons that can instantly be customized size, color, drop shadow, and anything that can be done with the power of CSS.
https://fortawesome.github.io/Font-Awesome/

Why should I use Font Awesome instead of images?
CSS loads faster than images - Definitely if you got dozen of images.
With CSS you can customize the icons faster and easier than editing an image.

How can I start using these icons?
Put this simple line of code to your .css file - Inside the <head></head> tags.

Code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Alright - Now I got the code in my CSS file and I'd like to put a cool icon on my site. What do I do?
First check for the icons and find the one you want to use.
Lets say I'd like to use this cool wrench icon: http://prntscr.com/8mnks0 - I just put this code to my HTML file

Code:
<i class="fa fa-wrench"></i>

and I'm done. It's there. :yus:

How can I resize these icons and change their color?
Check out the examples page. It'll define how to use different sized icons and change their colors.

Need further help?
Don't hesitate to message me <3

[CSS Icons] How to use Font Awesome on your website!

Submitted by Aeux, 01-10-2015, 09:35 PM, Thread ID: 10774