CSS-Customize Font Awesome Icons For Blogger

In this tutorial i'm going to explain how to customize Font Awesome Icons using css,you can use these icons as list style or anywhere you want it.We are also going to explain styling font awesome icons with fixed width.Font Awesome is an amazing vector graphics icon-based fonts that contains compact-sized,that can be used to optimize icons across your site. Font Awesome Icons best feature is that it is CSS customizable, you can also use pre-built classes of Font Awesome,or you can try your own custom styles for website.

List style Font Awesome Icons

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>Check Square icons</li>
  <li><i class="fa-li fa fa-dot-circle-o"></i>Dot Circle icons</li>
  <li><i class="fa-li fa fa-plus-circle"></i>Plus Circle icons</li>
  <li><i class="fa-li fa fa-square"></i>Square icons</li>
</ul>

Output:

These 4 icon's code display as a list style.

Resizing Font Awesome Icons

If you want to customize the font awesome icons you can use CSS code.Now,We are going to increase the Font size by using CSS.For increasing the size of font awesome icons use the below code.

<style>
.fa-ul{font-size:22px;}
</style>
<ul class="fa-ul">
   <li><i class="fa-li fa fa-check-square"></i>Check Square icons</li>
  <li><i class="fa-li fa fa-dot-circle-o"></i>Dot Circle icons</li>
  <li><i class="fa-li fa fa-plus-circle"></i>Plus Circle icons</li>
  <li><i class="fa-li fa fa-square"></i>Square icons</li>
</ul>

Output:

Add Color To Font Awesome Icons using CSS

Now,If you want to add the Color on the list style font awesome icons,use the code below.

<style>
.fa-ul{font-size:22px;color:#FF3333;}
</style>
<ul class="fa-ul">
   <li><i class="fa-li fa fa-check-square"></i>Check Square icons</li>
  <li><i class="fa-li fa fa-dot-circle-o"></i>Dot Circle icons</li>
  <li><i class="fa-li fa fa-plus-circle"></i>Plus Circle icons</li>
  <li><i class="fa-li fa fa-square"></i>Square icons</li>
</ul>

Output:

Font Awesome icons with fixed width

Add Font Awesome Icons with fixed width.means each and every icons have same distance from one to another.

<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>&nbsp; Home</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; Settings</a>
</div>

Output:

• fa-fw to set icons at a fixed width.

Spinning Icons

you can use a class fa-spin to spin icons.works with few icons,like fa-cog and fa-refresh.

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

Output:

Change Orientation

You can flip and rotate Font Awesome icons.

<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-->

Stacking icons

To combine two icons together to create a  new font awesome icon.

<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>

Output:

If you need any help related to Font Awesome Icons feel free to ask.