Styling Font Awesome Icons with List and Fixed Width - Supported By Bloggerspice

This blog post is supported by Bloggerspice.com visit the bloggerspice to get complete quality post like this, while this blog maybe not contain all post for bloggerspice, you can always visit the bloggerspice for more content, enjoy reading and don't forget to leave a comment and share.

For  the massive usage of Font Awesome icons on Blogger template, Blog Designer should know how to use it.  Font Awesome Icon can be use as a single icon and if you want to use the icons as list style then you have to be little tricky and similarly if you want to use Font Awesome Icons with fixed width then you have to tailor the icon code differently. So in this tutorial I will show you the way about assigning the Font Awesome Icon list and Fixed width style.

List style Font Awesome Icon

For stylish Font Awesome Icon as list style just use the below code block-

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
  <li><i class="fa-li fa fa-dot-circle-o"></i>can be used</li>
  <li><i class="fa-li fa fa-plus-circle"></i>as bullets</li>
  <li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>

Here I have added 4 icon's code which will be display as list style. Also used fa-ul and fa-li to easily replace default bullets in unordered lists. If you want to tweak the code then you can use CSS code to give it different shape. For example I will increase the Font size at a time by using CSS code-

For increasing Font Awesome Icon size just use the below code block-

<style>
.fa-ul{font-size:22px;}
</style>

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
  <li><i class="fa-li fa fa-dot-circle-o"></i>can be used</li>
  <li><i class="fa-li fa fa-plus-circle"></i>as bullets</li>
  <li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>

If you wish to add some color then simply use below code-

<style>
.fa-ul{font-size:22px;color:#F90101;}
</style>

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
  <li><i class="fa-li fa fa-dot-circle-o"></i>can be used</li>
  <li><i class="fa-li fa fa-plus-circle"></i>as bullets</li>
  <li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>

Here I have added color:#F90101; code for changing the icons and font color. And font size is font-size:22px;

So Now we will easily able to add Font Awesome icons by list style.

Adding Font Awesome Icon with Fixed width style

This is another way where we can use Font Awesome Icon with fixed width style. That means each and every icon will have same distance from one to another. I have used the below code block-

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

Here I have used fa-fwto set icons at a fixed width. Great to use when different icon widths throw off alignment. Especially useful in things like nav lists & list groups.

This list group can be used as Template  Menu. You can replace all # with any URL for navigation. Similarly by  adding CSS code you can easily tweak the icons. I hope you have understood the tutorial and able to implement in your template design. 

from Blogger Spice | Authoritative Blogger Lead http://ift.tt/1Jy3SRy