How to Use Font Icons on Your Website
February 15, 2016

How to Use Font Icons on Your Website

Know How Programming


We often see icons being used on websites, especially social media icons. The previous way of embedding icons onto a website would be to create them as images. Then adding them using CSS or the image tag. If you would like to have a change of color in these icons when you hover your mouse over them, you would need to create another set of images. That can be a hassle. Using font icons would be a better alternative.

What are Font Icons

Font icons are basically fonts that are symbols and glyphs. It is not text. You can however customize it like how you would customize text using CSS. Two of the most commonly used font icons would be Font Awesome and Typicons.

How To: Font Awesome

  1. Adding the CSS code onto your website. Make sure it is place in the <head></head> section.
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  2. Adding the icon code to an <i> tag.
    <i class="fa fa-pencil"></i> will display

How To: Typicons

  1. Download the necessary files here. Copy the entire font folder (in the src folder) and place it in your css folder.
  2. Adding the CSS code onto your website. Make sure it is place in the <head></head> section.
    <link rel='stylesheet' href='path/to/typicons.min.css' />

    Don’t forget to change the pathname pointing to your CSS file. If you have it in your CSS folder it should be something like this.
    <link rel='stylesheet' href='css/font/typicons.min.css' />

  3. Add this block of code at the very top of your CSS file.
    @font-face {
      font-family: 'typicons';
      src: url("path/to/typicons.eot");
      src: url("path/to/typicons.eot?#iefix") format('embedded-opentype'),
           url("path/to/typicons.woff") format('woff'),
           url("path/to/typicons.ttf") format('truetype'),
           url("path/to/typicons.svg#typicons") format('svg');
      font-weight: normal;
      font-style: normal;
    }
    

    Again, don’t forget to change the pathname pointing to your font files.

  4. Adding the icon code to an <i> tag.
    <i class="typcn typcn-pencil"></i> will display

Customize Font Icons

Once you have install your font icons to your website, you can start to customize them. If you do not assign a color to your icons, it will use the color of your text. Here are some examples of what you can do with your font icons.

A pink heart.

<i style="font-size: 30px; color: #ff69b4;" class="typcn typcn-heart"></i>

A blue Bluetooth sign.

<i style="font-size: 30px; color: #287aa9;" class="fa fa-bluetooth"></i>

A set of social media icons.

<i style="font-size: 30px; color: #3b5998;" class="typcn typcn-social-facebook"></i> 
<i style="font-size: 30px; color: #4099ff;" class="typcn typcn-social-twitter"></i>
<i style="font-size: 30px; color: #d34836;" class="typcn typcn-social-google-plus"></i> 
<i style="font-size: 30px; color: #c92228;" class="typcn typcn-social-pinterest"></i>
<i style="font-size: 30px; color: #007bb6;" class="typcn typcn-social-linkedin"></i>

Have fun and go wild with font icons.


Leave a Reply

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