Styling Font Awesome Icons with List and Fixed Width

Styling Font Awesome Icons with List and Fixed Width
icon design

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>

Font awesome icons list

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>



large icons

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>

colored font and icons

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>
fixed width icons

Here I have used fa-fw to 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. 
Go Up