How To Show Hidden Awesome Fonts

Author: Szymon Lipiński
Published at: 2015-09-03

So I rewrote my blog. Previously I used Wordpress, which was a bunch of spaghetti code, random plugins, terribly old database changes. Now it is much simpler, much better, much faster. Maybe I will describe the implementation later.

While rewriting the blog, I wanted to use the great Awesome Font. I wanted to use the four icons you can see in the lower left corner of this page. It was as easy as using:

<a><i class="fa fa-twitter-square"></i></a>
<a><i class="fa fa-linkedin-square"></i></a>
<a><i class="fa fa-github-square"></i></a>

Everything was good. Code was OK, font file, and the awesome css file were in place. All looked good.

Except for the fact that the icons were now showing a browser. However I don’t remember in which one they were showing up, in which one they were hidden. I was testing the website on the Chrome and the Firefox.

After digging into the problem, it turned out that the strange behaviour was caused by the adblock.

When I switched the adblock off, all the icons were shown.

After digging into the list of the adblock rules, I found a couple of them, all filtering the style names. So if a style is named like fa-twitter then it will be hidden.

The only solution I found was simply checking what the fa-twitter style has inside, and use it internally.

.fa-twitter:before {
  content: "\f099";
}

So I just made my style like:

.sl-tw:before {
  content: "\f099";
}

and changed the html into:

<a><i class="fa sl-gh"></i></a></li>
<a><i class="fa sl-li"></i></a></li>
<a><i class="fa sl-tw"></i></a></li>
The comments are disabled. If you want to write something to me, you can use e.g. Twitter.