How To Show Hidden Awesome Fonts

I rewrote my blog engine. 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 Fonts library. I wanted to use the four icons you can see in the lower left corner of this page. It was as easy as:

<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. The code was OK, font file and the awesome css file were in place. All looked as it should.

Except for the fact that the icons were not showing in all browsers. 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 behavior was caused by the adblock extension.

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>

This way all the icons were showing up in the browsers.