How to Make Circular Icons with Font Awesome

Font Awesome is a very popular and free icon set and CSS library. I’ve used font awesome with many of my web applications and love how simple yet powerful it is. In this article, I will go over how you can create dynamic, circular icons using Font Awesome.

 

The Set Up

First you will need to include the Font Awesome library in your HTML file. You can go here to download the zip and reference it locally, but i’ll take the simpler rout for this tutorial and simply reference the hosted Font Awesome files on BootstrapCDN.

  • Add the following line of code at the top of your page:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

 

The HTML

With the reference in place, now you can start inserting the icon font into your page. To make the circular icon we will use 2 font awesome icons, the circle as the the back for the icon and any other icons you want. Here, I choose to use the pie chart. We will also use font awesome’s stack classes to stack the icons.

  • Line 1: Use a span as the container for the 2 icons. We will have to use the fa-stack class for this container to let the browser know the items within this apn are stacking items. We will get to wduIconDemo class later.
  • Line 2: The circle icon is added using the fa and fa-circle classes. fa-stack is to signify this is a stacking element. 2x is for is the bigger icon and 1x is for the smaller icon
  • Line 3: For the second, smaller icon, we used a-bar-chart. fa-inverse will give it a color that is the inverse of the first icon.
<span class="fa-stack wduIconDemo">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa fa-bar-chart fa-stack-1x fa-inverse"></i>
</span>

 

The CSS
The html markup is enough for a static icon, but I want to get fancy and give it a nice hover effect. The wduIconDemo class; this is a class that we’ve created to style our icon.

  • Line 1-4: The CSS code here will change the color of all fa-stack-2x elements within a wduIconDemo element to red when the move is hovered over the element.
.wduIconDemo:hover  .fa-stack-2x
{
 color:red;
}

 

The Live Demo

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *