--> Font Awesome Shortcodes — Add Icons Easily! | Experience Lab - Online business creation and development guide for bloggers and startups

Font Awesome Shortcodes — Add Icons Easily!

Introduction of Shortcodes Plugin for Blogger blogs was our biggest contribution to Blogspot community last year and to make sure we continu...

Font Awesome ShortcodesIntroduction of Shortcodes Plugin for Blogger blogs was our biggest contribution to Blogspot community last year and to make sure we continue providing free support and development to the plugin, we are releasing some new shortcodes to make your content writing hobby even more worthwhile in 2016. Today we are releasing Font Awesome Icons Shortcodes, that will help you add FontAwesome Icons anywhere on your blog with a simple one liner textual code. You can now add FontAwesome vector icons inside Blog posts, sidebar content, sidebar headlines, header description and exclusively inside blogger comments box! The plugin includes the latest dynamically updated github source link to fontawesome library to make sure your blog keeps supporting all new icons and aliases added in the official icons directory. Lets first see its demo in action!

Note: The premium version of this shortcode plugin works with any CMS platform like WordPress, joomla, drupal or any HTML site. Contact us for a quotation.

1. Install Blogger Shortcode Plugin

In order to use FontAwesome shortcode you must first install the shortcode plugin for your blogger blog by following 7 easy steps shared inside the link below:

Skip installing this plugin if you have already added it in your blogspot template

2. How To Add Font Awesome Shortcode?

With this shortcode, you will be able to customize your icons in 8 different ways.

Flip it:
[icon name="youtube" flip="vertical"/]

Pulse it:
[icon name="spinner" animation="pulse"/]

Rotate it:
[icon name="thumbs-up" rotate="90"/]

Resize it:
[icon name="tag" size="3x"/]

Spin it:
[icon name="cog" animation="spin"/] 

Link it:
<a href="#">[icon name="home"/]</a>

Color it:
[icon name="shopping-cart" color="#65C002"/]

Give Fix Width:
[icon name="users" fix="fw"/]

The third column above shows the syntax on how to write down your Icon Shortcode. You can add it easily in both compose mode or Source/HTML mode of your blogger editor. Lets discuss the attributes in detail:

  1. Type Icon name inside name attribute. Full list of icon names can be found here.

  2. Use size attribute to increase icon sizes relative to their container. Size values supported are lg (33% increase), 2x, 3x, 4x, and 5x.

  3. Use fix to set icons at a fixed width. Useful when different icon widths go off alignment. Especially useful in things like nav lists & list groups. Set value as fw

  4. Use the animation attribute to get any icon to spin, or to have the icon rotate with 8 steps by setting it to pulse.

  5. To arbitrarily rotate icons, use the rotate attribute. Set value to following degree directions 90, 180, 270.

  6. To flip icons vertically or horizontally use flip. Set value to either horizontal or vertical.

  7. To change color of icon use color attribute. You can use web standard color names by simply typing orange, red, blue etc or you can use hexadecimal color codes.

  8. To hyperlink an icon simply enclose the shortcode inside href a tags.

You can also use the icons inside the other shortcodes list that we shared. For example to create a button with facebook, twitter, google-plus icon inside it, we will simply use button shortcode followed by Fontawesome shortcode.


[button size="medium" color="fb"] [icon name="facebook"/] Like [/button]

[button size="medium" color="blue"] [icon name="twitter"/] Follow [/button]

[button size="medium" color="red"] [icon name="google-plus"/] Follow [/button]


buttons created using fontawesome shortcode

Wasn't that easy? =)

Need Help?

I hope you find this most demanded FontAwesome shortcode useful for your content writing and blogging hobby. Let me know if you needed any help in understanding any part of the above tutorial. Feel free to leave your precious feedback. Peace and blessings buddies! =)



Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,9,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,7,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
Experience Lab - Online business creation and development guide for bloggers and startups: Font Awesome Shortcodes — Add Icons Easily!
Font Awesome Shortcodes — Add Icons Easily!
Experience Lab - Online business creation and development guide for bloggers and startups
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy