Add Icon Fonts to Text Links

thumb_iconfonts

Customise your text links with icon fonts! It’s much easier to display small icons beside text links if you use web font icons which is called “icon fonts”. I’ll share how to change icons by link URL and format type as well!

What Is Icon Fonts?

Icon fonts are fonts that each character has different icon image. Normally bitmap images don’t scale well. They can lose quality when scaled up and waste file size when scaled down. Icon fonts don’t have these problems. They scale well so you don’t have to prepare different images for retina display on iPhone or iPad. Also you can style those icons by CSS super easily!

However, if users can’t load font files, web page displays only 1 character which doesn’t make sense for sentence. You should understand this problem before you use.

Download Font

You’ll find a lot of icon fonts. I chose Fontello to use because you can select only your favourite icons!


Select your favourite icons.


Type 1 alphabet character on “Edit Codes” and download them.

Basic Setting


Downloaded font files are in a “font” folder. Move it to your project folder.

Next write a bit of CSS using @font-face.

@font-face {
  font-family: 'fontello';
  src: url("../font/fontello.eot");
  src: url("../font/fontello.eot?57098116#iefix") format('embedded-opentype'), url("../font/fontello.woff") format('woff'), url("../font/fontello.ttf") format('truetype'), url("../font/fontello.svg#fontello") format('svg');
}

Add Icons to Text Links

Icon fonts

Now you need to write alphabet characters like “m” or “d” that you set on a website to HTML. However writing characters for only styling is not right HTML structure. Then use :before selector and content property to add new elements before it.
This :before selector is supported by Chrome, Firefox, Safari and IE8+.

External Link

Add an icon to text link starting with http:// using a[href^="http://"] .

/* External Link */
a[href^="http://"]:before {
    font-family: 'fontello';
    content: 'e';
    color: #3cc;
    margin:0 3px;
}

Email Link

Same idea, text link with mailto: and URL specified.

/* Email Link */
a[href^="mailto:"]:before {
    font-family: 'fontello';
    content: 'm';
    color: #3cc;
    margin:0 3px;
}

/* URL Specified */
a[href="http://webcreatorbox.com/feed"]:before {
    font-family: 'fontello';
    content: 'r';
    color: #f93;
    margin:0 3px;
}

Format Type

Icon fonts

You can select format type by a[href$=""] .

/* PDF File */
a[href$=".pdf"]:before {
    font-family: 'fontello';
    content: 't';
    color: #0c6;
    margin:0 3px;
}

/* Downloadable File */
a[href$=".zip"]:before {
    font-family: 'fontello';
    content: 'd';
    color: #f9c;
    margin:0 3px;
}

Wrapping UP

There are more ways to use icon fonts. Please share your ideas :)

Share

Comments

  • M4Kamran

    Thank you very much for this great info!
    It really helped.