Miva Merchant, eCommerce, SEO, Wordpress, & general web development and consultation.
Miva Merchant Storemorph

Add modern icons to your store with Font Awesome


Font Awesome gives you hundreds of useful icons that can be used just like text and styled in any way with CSS. Font Awesome is easy, useful, and cool. Actually, it's kind of awesome.

by

Miva Merchant ReadyThemes are a great way to put up a good looking online store out of the box, and that is the most important function of an eCommerce store.

Sell stuff as soon as possible - don't wait until you're ready to put it up.

After your store is up, you can relax and customize it at your leisure. 

Font Awesome

Font Awesome has over 600 icons you can use to personalize your store.

Bootstrap Stores

If you are running a store based on the bootstrap framework, such as Base ReadyTheme, Retro, or PrepWorx, there is a version of FontAwesome already loaded into your store, so you can skip the first step below.

Step 1: Load FontAwesome CSS Files

The files are located at a CDN so all you have to do is put the following line just before your closing tag, found in the USER INTERFACE > SETTINGS > HEAD TAG CONTENT box.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

Step 2: Start Using FontAwesome Icons

If you are using a bootstrap based readytheme skip to the next step for older FontAwesome icons.

Using a FontAwesome icon is a breeze. Find an icon you like, such as the arrows icon above, and put the following code in:

<i class="fa fa-arrows"></i>

Step 3: Older FontAwesome Icons for Bootstrap Based Themes

If you're using a bootstrap based ReadyTheme then you're also using version 3.2 of FontAwesome. Click Here to take a look at your available icons.

To use a version 3.2 FontAwesome icon, find the icon you want, such as the icon-star symbol, and enter the following code:

<i class="icon-star"></i>

CornerstoneUX framework notes:

If you are using Suivant, Optics, Suivant, Iron & Wool, Coustic or any other CornerstoneUX framework in your Miva Merchant store, you have an icon library already loaded. Take a look at it here and scroll down to the Complete Set and Unicode Reference Guide section.

Using these icons is a bit different than FontAwesome, but just as easy. Each icon has a code under it. The right-arrow code is & #x24;

Display the right-arrow icon by using this code (remove the space between the & and # symbols):

<span data-icon="& #x24;"></span>

Scot's Blogger FontAwesome Shortcodes:

Scot's Blogger is a Miva Merchant module that adds a Wordpress-like environment to your Miva Merchant store and makes it easy to write blog posts in your store about products or anything else.

Scot's Blogger has shortcodes for FontAwesome icons. The fa-arrows symbol is displayed like this:

[scotsblogger fa fa-arrows]

You can also use the icon names from FontAwesome 3.2:

[scotsblogger fa icon-star]



(0/5, vote) my rating:
overall rating:

Please log in to leave a comment.

The blog posts on Scot's Scripts are served by Scot's Blogger, a Miva Merchant blogging module that makes it easy to create a Wordpress style blog, rich content, and extra pages in your Miva Merchant store.