Custom unordered Bullet List with Font Awesome

Custom unordered Bullet List with Font Awesome

Font Awesome

Though I have already shared with your about custom unordered bullet list by using start image But many Blogger don't want to use Image. So the alternative way is using Font Awesome for displaying bullet pointer.  We know that Font Awesome is a set of pictographic icon so we can change icon according to our wish. But for example purpose in this tutorial I have used hand direction. Installing widget is very easy just follow the below steps-

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Click on -> Template -> Edit HTML

Step 3 Now find <head> by Pressing Ctrl+F (Windows) or CMD+F (Mac)

Step 4 And Paste the below code after/below <head> 

<link href='//' rel='stylesheet'/>

Step 5 Now again find ]]></b:skin> by Pressing Ctrl+F (Windows) or CMD+F (Mac)  

Step 6 And Paste the below code above/before ]]></b:skin> 

/*Bullet List by*/
.post ul {
.post ul li:before{content:"\ f0a4";font-family: fontAwesome;
color: #333333;
font-style: normal;
top: 0;
left: 0;
margin-right: 13px;}
.post ul li{
position:relative;display:block;padding:5px 8px;margin-left:10px;background:#fff;font:15px "Oswald",sans-serif;color:#000000;text-decoration:none;transition:all .3s ease-out;

Step 7 Now simply hit the Save Template button.


  • You can easily change Font Awesome icon by altering this "\ f0a4" code.  

How to Add Bullet list?

We have done all task and in this time we will add the bullet list in our Blog post. This is really easy. Just follow the below steps-

Step 1 Make your text in separate line like 2/3 lines.

Step 2 Now block the whole line by using mouse pointer.

post editor

Step 3 Finally click on Bullet list icon from formatting tools bar in writing panel.

Now publish your Blog post and check it, you will able to see bullet list powered by Font Awesome. The main positive side of using Font Awesome that this will load from maxcdn server which is very fast to load. And there hasn't any change to deletion of the icons, because we are not using any image.  

Post a Comment

Nice post bro.. visit back

Facebook Group Community 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


Email *

Message *