Styling Font Awesome Icons with List and Fixed Width

Styling Font Awesome Icons with List and Fixed Width

5
data:blog.title
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. 
Styling Font Awesome Icons with List and Fixed Width
4 Stars stars - "Styling Font Awesome Icons with List and Fixed Width" For  the massive usage of Font Awesome icons on Blogger template, Blog Designer should know ho...

Explain possible rollover in columns

Hi Hussein.. didn't understand your comment. please write in details.

How to add icons in columns

In Tutorial you will find the method..

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *