Prevent Adblock from Blocking Fontawesome Icons
2016-09-05The Adblock Plus Chrome extension has started to block some of the beloved FontAwesome icons, when the user enables the "Remove Social Media Buttons" setting.
To circument this, there are several approches.
The one I found most convenient is to just define a custom class for the
affected icon.
Here is how you do it:
FontAwesome works by adding a CSS content: "\fXX"
directive with the :before
pseudo selector. It's trivial to create a custom icon class. Let's try it for
the Twitter icon.
.fa-custom-twtr:before {
content: "\f099";
}
<i class="fa fa-custom-twtr"></i>
To extend it to other icons, just add additional classes and change the
content: "\fXX"
value to the unicode value of the icon, which can be
found on the individual icon pages just under the header.
The icon list is here: FontAwesome Icons.