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!

Latest Posts



Fill in the form below to send us a message. Your details will not be used for promotional purposes or passed on to any third parties.


By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.