How To Customize Font Awesome Icons in Blogger?

Font Awesome is an amazing icon-based font that contains compact-sized, but high quality scalable vector graphics that can be used to optimize most icons across your site. We've talked about implementing Font Awesome Icons on your Blogger template (or any HTML webpage), and we saw that one of the best features about this iconic font is that it is CSS-customizable, which means you can use some pre-built classes, or write your own custom styles to fit your website! In this post, we'll talk about customizing these icons for your site.

Check out our other Font Awesome tutorial to get started with this awesome font!

How To Use Font Awesome Icons In Your Website?

To use an icon, simply use the <i> tag as shown below.

<i class="fa fa-home"></i>

You can change the highlighted part with the name of any other icon class you like. Here's a list of all available icons.

Customizing CSS

You can create new CSS rules for any of the pre-defined classes. For example;

.fa-home {

font-size: 32px;

color: #033;

padding: 8px;

border: 1px solid #000;

float:left;

}

Here's the icon before styling, and

here's the same icon after styling.



Sometimes, using CSS might not be the best way to do something. Font Awesome provides some additional features!

Resizing icons

To resize an icon by a constant factor, say two times or four times, simply add the rule as shown below.



   <i class="fa fa-home fa-1g"></i>

   <i class="fa fa-home fa-2x"></i>

   <i class="fa fa-home fa-3x"></i>

   <i class="fa fa-home fa-4x"></i>

   <i class="fa fa-home fa-5x"></i>



Please note that not all icons can be resized this way.

Spinning icons

Just like when resizing icons, you can use a class called fa-spin to spin icons. Again, this only works well with a few icons, such as fa-cog and fa-refresh.

<i class="fa fa-refresh fa-spin"></i>

<i class="fa fa-cog fa-spin"></i>

This should look as follows.

   

Change orientation

You can easily flip and rotate icons in a similar way. Here are the classes to be used.

<i class="fa fa-shield"></i>&nbsp; normal<br>

<i class="fa fa-shield fa-flip-horizontal"></i> <!--Flip Horizontally-->

<i class="fa fa-shield fa-flip-vertical"></i> <!--Flip Vertically-->

<i class="fa fa-shield fa-rotate-90"></i> <!--Rotate 90 Degrees Clockwise-->

<i class="fa fa-shield fa-rotate-180"></i> <!--Rotate 180 Degrees-->

<i class="fa fa-shield fa-rotate-270"></i> <!--Rotate 90 Degrees Anti-clockwise-->

Lists

Don't like the default bullets and numberings of your lists? You can easily replace them with icons! Here's an example;

• Home Icon


• Square Icon


• Checked Square Icon

Here's how to use icons in lists;

<ul class="fa-ul">

<li><i class="fa-li fa fa-home"></i>Home Icon</li>

<li><i class="fa-li fa fa-square"></i>Square Icon</li>

<li><i class="fa-li fa fa-check-square"></i>Checked Square Icon</li>

</ul>

Stacking icons

Sometimes, it can be useful to combine two icons together to create a whole new icon. For example, a cross icon can be placed on a camera icon to signify that camera's are not allowed. You can combine many pairs of icons to form new ones. Here are a few examples.

<span class="fa-stack fa-lg">

<i class="fa fa-square-o fa-stack-2x"></i><i class="fa fa-check fa-stack-1x"></i>

</span>

<span class="fa-stack fa-lg">

<i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-flag fa-stack-1x fa-inverse"></i>

</span>

<span class="fa-stack fa-lg">

<i class="fa fa-camera fa-stack-1x"></i><i class="fa fa-ban fa-stack-2x text-danger"></i>

</span>

This is how they're supposed to look.



























This was it for now. If you need more tutorials, feel free to let us know in the comments section below, or follow through to the FA website for more help. All the best :)