Magento font icons usage and examples

Icons are a simple and effective way to draw users into the content of your website. They can help you structure content and separate different sections of the page. The primary goal of using icons should be to help the user find information on the page.

Icons

With icons you can quickly sum up what your text is about. Use an icon that encapsulates the point you are trying to get across in your paragraph. This will make the text more accessible to your readers.

Create an icon

example of a simple icon

You can place icons just about anywhere using simple markup. We are going to use an inline HTML element such as <span> and add appropriate classes to it. These are required classes: ic and the icon's name prefixed with ic-, for example ic-star. Here's an example of the code which will add a star icon:


<span class="ic ic-star"></span> example of a simple icon

If you change the font-size of the icon's container, the icon gets bigger. Same things goes for color, drop shadow, and anything else that gets inherited using CSS.

Icon size

ic-lg

ic-2x

ic-3x

ic-4x

To increase icon size relative to the font-size of the icon's container, use the following classes: ic-lg (increases the size of the icon by 33%), ic-2x, ic-3x, ic-4x, ic-5x, ic-6x, ic-7x or ic-8x.


<span class="ic ic-star"></span>
<span class="ic ic-star ic-lg"></span> ic-lg
<span class="ic ic-star ic-2x"></span> ic-2x
<span class="ic ic-star ic-3x"></span> ic-3x
<span class="ic ic-star ic-4x"></span> ic-4x

If your icons are getting chopped off on top and bottom,
make sure you have sufficient line-height.

Inline styles

Now you can start having more fun with icons. By default all icons have the same color as text, but if you want to change the color of selected icon, you can do it with inline CSS styles. Add the style attribute to the icon element and specify the color.

You can add inline styles to icons the same way as to any other HTML elements in a HTML document. The style attribute can contain any CSS property, such as color, font-size, text-shadow etc.


<span class="ic ic-heart-o ic-3x"></span>
<span class="ic ic-heart-o ic-3x" style="color: #e91e8f;"></span>
<span class="ic ic-heart-o ic-3x" style="color: #95dc24;"></span>

Animated icon

Use the ic-spin class to get any icon to rotate.


<span class="ic ic-star ic-2x ic-spin" style="color: #be64e4;"></span>
<span class="ic ic-reload ic-2x ic-spin" style="color: #5bd2ec;"></span>

Examples of icons

Iconboxes

Simple iconbox

example of an iconbox

To display an icon inside a box with background color (we call it an iconbox), add the ib class to the icon element. With the optional class ib-hover, the color of the iconbox will change on mouse hover over the iconbox.

Background color will be automatically added to the icon element. Make sure to leave the <span> tag empty – otherwise the contents of the tag will be displayed together with the icon and any additional space can dislocate the icon.


<span class="ic ic-star ib ib-hover"></span> &nbsp;example of an iconbox

The default background color and color of the icon can be configured in the admin panel:
Theme Design > Colors > Iconbox

Iconbox size

To increase iconbox size, use the following classes: ib-size-l, ib-size-xl, ib-size-xxl, ib-size-xxxl.

The icon size is independent of the iconbox size and can be increased with classes which were described earlier. For example, add class ic-lg to make the icon a little bit bigger.


<span class="ic ic-heart-o ib ib-hover"></span> &nbsp; 
<span class="ic ic-heart-o ic-lg ib ib-hover ib-size-l"></span> 
<span class="ic ic-heart-o ic-lg ib ib-hover ib-size-xl"></span> 
<span class="ic ic-heart-o ic-2x ib ib-hover ib-size-xxl"></span> 
<span class="ic ic-heart-o ic-3x ib ib-hover ib-size-xxxl"></span>

Iconbox shape

To change the shape of the iconbox, use one of the following classes: ib-circle, ib-rounded, ib-square. By default the iconbox is always circular.


<span class="ic ic-star ic-lg ib ib-hover ib-size-l"></span> 
<span class="ic ic-star ic-lg ib ib-hover ib-size-l ib-rounded"></span> 
<span class="ic ic-star ic-lg ib ib-hover ib-size-l ib-square"></span>

Iconbox effects

To add eye-catching hover effects to the iconbox, use one of the following combinations of classes. Note that in each case the combination consists of two classes:

ib-ef-1 ib-ef-1a
ib-ef-1 ib-ef-1b
ib-ef-2 ib-ef-2a
ib-ef-2 ib-ef-2b
ib-ef-3 ib-ef-3a
ib-ef-3 ib-ef-3b


<span class="ic ic-plane ic-lg ib ib-size-l ib-ef-1 ib-ef-1a"></span> 
<span class="ic ic-plane ic-lg ib ib-size-l ib-ef-1 ib-ef-1b"></span> 
<span class="ic ic-plane ic-lg ib ib-size-l ib-ef-2 ib-ef-2a"></span> 
<span class="ic ic-plane ic-lg ib ib-size-l ib-ef-2 ib-ef-2b"></span> 
<span class="ic ic-plane ic-lg ib ib-size-l ib-ef-3 ib-ef-3a"></span> 
<span class="ic ic-plane ic-lg ib ib-size-l ib-ef-3 ib-ef-3b"></span>

Examples of iconboxes

Blocks of text with icon

Icons can help you structure content and separate different sections of the page. The primary goal of using icons should be to help the user find information on the page and with icons you can quickly sum up what your text is about. For example, when you build lists, instead of using standard bullets, you can use icons to draw attention to paragraphs and other blocks of content.

Simple block with icon

Heading Example

This is a paragraph of sample text. Using this markup you can quickly build all kinds of blocks. Icons are an effective way to...

To create a simple block of text with an icon, wrap your text inside a <div> element with the feature class. Here's a minimal example:


<div class="feature">
	<span class="left ic ic-star ic-2x" style="color: #5bd2ec;"></span>
	<h4>Heading Example</h4>
	<p>This is a paragraph of sample text. Using this markup you can quickly build all kinds of blocks. Icons are an effective way to...</p>
</div>

If you add left or right class to the icon, the icon will be taken from the normal flow and placed along the left or right side of its container, and text will wrap around it.

Indented block

Heading Example

This is a paragraph of sample text. Using this markup you can quickly build all kinds of blocks.

To display a block with indentation on the left side, add the indent class to the block element:

To increase the size of the indentation, use the following classes together with the indent class: indent-size-l, indent-size-xl, indent-size-xxl, indent-size-xxxl.


<div class="feature feature-icon-hover indent">
	<span class="left ic ic-star ic-2x" style="color: #de2666;"></span>
	<h4>Heading Example</h4>
	<p>This is a paragraph of sample text. Using this markup you can quickly build all kinds of blocks.</p>
</div>

Block with iconbox and hover effect

Heading Example

This is a paragraph of sample text. Using this markup you can quickly build all kinds of blocks.

To change the background color of the iconbox on mouse hover over the entire block, add the feature-icon-hover class to the block element.

If you increase the iconbox size (by adding a class such as ib-size-xl), you will also need to add corresponding class (in this case: indent-size-xl) to the block element. It will adjust the size of the indentation.


<div class="feature feature-icon-hover indent indent-size-xl">
	<span class="left ic ic-star ic-lg ib ib-size-xl"></span>
	<h4>Heading Example</h4>
	<p>This is a paragraph of sample text. Using this markup you can quickly build all kinds of blocks.</p>
</div>

The default background color and color of the icon can be configured in the admin panel:
Theme Design > Colors > Iconbox

More complex example

Above heading

Heading Example

Text below heading

This is a paragraph of sample text. Using this markup you can quickly build all kinds of blocks.

Lorem ipsum dolor sit, consectetur adipiscing elit.

Lid est laborum et dolorum fuga et harum quidem.

Seq et perspser iciatis unde omnis iste nautis.

Example of another text paragraph inside a block. Icons are an effective way to draw users into the content of your store.

Magento font icons usage and examples

Icons

Create an icon

Icon size

Inline styles

Animated icon

Examples of icons

Iconboxes

Simple iconbox

Iconbox size

Iconbox shape

Iconbox effects

Examples of iconboxes

Blocks of text with icon

Simple block with icon

Heading Example

Indented block

Heading Example

Block with iconbox and hover effect

Heading Example

More complex example

Above heading

Heading Example

Text below heading

Centered block

Heading Example

Font Awesome icons

Basic Font Awesome icons

Use Font Awesome icons with other icon classes

Heading Example

Examples of block with icon

Unlimited Colors

Responsive Layout

Mega Menu

Font Icons

Easy to Customize

50+ CMS Blocks

Examples of block with iconbox

Unlimited Colors

Responsive Layout

Mega Menu

Font Icons

Easy to Customize

50+ CMS Blocks

Block with iconbox + iconbox effects

The Secondary Heading

Feature Title Example

The Secondary Heading

Feature Title Example

The Secondary Heading

Feature Title Example

The Secondary Heading

Feature Title Example

The Secondary Heading

Feature Title Example

The Secondary Heading

Feature Title Example

The Secondary Heading

Feature Title Example

The Secondary Heading

Feature Title Example

The Secondary Heading

Feature Title Example

The Secondary Heading

Feature Title Example

The Secondary Heading

Feature Title Example

The Secondary Heading

Feature Title Example

Paragraph - with and without indentation

The Secondary Heading

Feature Title Example

The Secondary Heading

Sample Title

The Secondary Heading

Feature Title Example

The Secondary Heading

Feature Title Example

Feature Title Example

Sample Title