FontAwesome is a fantastic resource for icons and whatnot, allowing you to easily add a whole variety of great looking icons and logos into websites with just html tags.
Every now and again I find the need to add them using CSS which can be a bit of a headscratcher. Below is a nice simple guide to getting it done quickly.
Step 1: Add the FontAwesome stylesheet to the head section of your website:
Step 2: Choose your icon from the list: http://fortawesome.github.io/Font-Awesome/icons/.
I went for the double circle, notice when you click on the icon the next page tells you its unicode character in this case f192. Below is the html version of the one I chose.
Step 3: Add in the unicode to your css class.
.css-fontawesome:before {
font-family: FontAwesome;
content: "\f192";
}
And finally give a HTML element the class we just defined in css:
<div class="css-fontawesome">Lorem ipsum...</div>
And you’re done!