Prevent Adblock from Blocking Fontawesome Icons

The 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.