Fontello and embedding icon fonts using @font-face

Note: This post might be useful to anyone using the Storefront Chronology Theme who wants to add more Social icons to the existing theme or just more general icons to their default Chronology font.

Fontello is an icon font generator where you can compile and download a bespoke webfont from various well known icon fonts.
It is also possible to add extra icons to an existing package and import custom icons/font if you have an .svg file of the icons/font in question. You can also customise the names and UTF-8 codes of your downloaded icons.
The UTF-8 codes will be important later on when we convert the icon font characters into icons in our css.

Once you have downloaded the webfont you can declare it using @font-face in your css file, see this post for instructions on how to do this.

The HTML for the icon element

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

The above code with the below css will render the icon inline like this

The css

We will render the icon font in the :before pseudo element.
We also want to target elements with the class beginning with “icon-” or ” icon-“.
In the code below the ^ in the css selector is the symbol which indicates that the “icon-” should be at the beginning of the class attribute. Respectively the * is the symbol that the class attribute should contain ” icon-” somewhere within it.

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: 'name_of_icon_font';
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: 0.2em;
  text-align: center;
}

Note: You do not need to use the class with a prefix of “icon-“. It can be anything so long as it matches the class of your i element.

Now we come back around to the UTF-8 font codes as previously mentioned which we are able to define in Fontello.

The codes and names need to be consistent in that if the code for the icon you choose in the app is set to U+E800 then the code you enter in your css should match like this \e800 (css HEX value).
The names of the icons should be consistent between Fontello and your css also.

The codes form the content of the :before pseudo element for each icon class so that when you add the HTML icon elements the proper character is displayed.

Below is the final css for the icon classes.

.icon-instagram:before{ content: '\e800'; }
.icon-globe:before{ content: '\e803'; }
.icon-user:before{ content: '\e801'; }
.icon-cc-paypal:before{ content: '\e804'; }
.icon-mobile:before{ content: '\e802'; }
.icon-plus:before{ content: '\e805'; }
.icon-mail:before{ content: '\e807'; }
.icon-comment:before{ content: '\e806'; }
.icon-commercial-building:before{ content: '\e808'; }
.icon-flight:before{ content: '\e809'; }
.icon-clock:before{ content: '\e80A'; }
.icon-basket-alt:before{ content: '\e80B'; }

List example for icons

You can use icon fonts for list items if you declare the class for each list item and associate the icon to it.
See the code below.

  • My Instagram Link Text
  • Matthew Lillistone
  • email address
  • Options go here
  • 09876 543210

HTML and CSS code

<ul>
<li class="icon_example_instagram"><a href="my_instagram_url">My Instagram Link Text</a></li>
<li class="icon_example_user">Matthew Lillistone</li>
<li class="icon_example_mail">My email address</li>
<li class="icon_example_flight">Delivery options go here</li>
<li class="icon_example_mobile">09876 543210</li>
</ul>
[class^="icon_example_"]:before,
[class*=" icon_example_"]:before {
  font-family: 'name_of_icon_font';
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: 0.2em;
  text-align: center;
}

.icon_example_instagram:before{ content: '\e800'; }
.icon_example_user:before{ content: '\e801'; }
.icon_example_mobile:before{ content: '\e802'; }
.icon_example_mail:before{ content: '\e807'; }
.icon_example_commercial-building:before{ content: '\e808'; }
.icon_example_flight:before{ content: '\e809'; }

Share this

Leave a Reply

Your email address will not be published. Required fields are marked *