What?
I needed to use these in a template I was working on. Font awesome is a brilliant tool for webdevelopers who want icons that can be any size of any color without compromising on image quality or overhead maintenance. It's basically a font set that has all the icons you would want in a modern website design.
How?
To use this list, you can either:
- Copy the font files to your template folder (my preference) and add the linked stylesheet in the head section of your webpage. I'm selective of what icons I copy over but the full directory can be found at https://github.com/FortAwesome/Font-Awesome:
copyrawstyler
<link rel="stylesheet" href="/path/to/font-awesome/css/font-awesome.min.css">
- <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
- OR add the linked stylesheet to the head section of your webpage
copyrawstyler
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
You then add the icon to your webpage using a CSS reference:
copyrawstyler
<i class="fa fa-facebook-square"></i> My facebook social icon
- <i class="fa fa-facebook-square"></i> My facebook social icon
Further examples are on the following site at
https://fortawesome.github.io/Font-Awesome/examples/.
The List
This is a copy of the cheat sheet version 4.4. If some icons don't appear on this page, it is because I have only copied over some of the entire directory (the icons I want to use).
Category: Web-Development :: Article: 610