Font-awesome: Missing Brand Icons (Ad blockers related issue)

[eridal]

Hi all,
I've noted that some brand icons are missing: fb, g+, linkedin, pinterest, and twitter specially.

Here is how it looks like in my browser.

[tagliala]

browser? os? (looks like chrome/w7)

Please clear your browser cache and check that you have not installed an old version of the fontawesome ttf in your system.

Check other browsers too

[eridal]

Firefox 23.0 on Ubuntu 12.04

[tagliala]

Could you please test other browsers and clear the cache?

[ghost]

just ran into this issue, and wanted to comment
I'm running Ubuntu 13.04 and FF 23 and everything looks fine.
And in fact I don't think that Ubuntu version does something here, probably your cashe needs to be cleaned IMHO )

[eridal]

I'm not sure why but I keeps failing. I have clean cache and even disabled it but they are still missing.

[tagliala]

Other browsers?

[eridal]

Hmm it only fails, persistently, on Firefox. I works just fine on others.
Well.. I _hope_ this is only broken on my machine.

[tagliala]

Everything is fine for me on Firefox/Ubuntu 13.04.

If I well remember, there was an issue with Firefox and older version of Ubuntu due to graphic drivers...

[deepakprabhakara]

I noticed that the same issue has surfaced in Chrome's latest version (v 29.0.1547.65), works fine in the older versions. Looks like Google broke something in their latest version.

[tagliala]

can you please check graphic drivers?

[deepakprabhakara]

@tagliala This is on Macbook Air (OS X 10.8.4), Intel HD Graphics 4000. As far as I remember I haven't updating anything related to the graphics card.

[deepakprabhakara]

@tagliala Damn! Found the culprit, it's https://adblockplus.org Chrome extension. It blocks anything remotely containing these social network keywords!

@eridal Could you please check to see if you have Adblock Plus or a similar ad blocker installed on Firefox?

[tagliala]

@deepakprabhakara is that a default?

[tagliala]

@deepakprabhakara confirming it's not a default.

It depends on "Remove Social Media Buttons" option:

.icon-twitter, .iconFacebook, .iconTwitter, .icon_delicious, .icon_digg, .icon_facebook, .icon_twitter, .icos-social, .idMetaItmSocialCompact, .idc-share, .identity-fb-notice, .ilsb-share, .in-post-social, .in-social, .inarticle-image-share, .inline-img-share-fb-button, .inline-img-share-tw-button, .inline-share, .inline_socials, .inner-social {
display: none;
}

.horiz_share, .horizontal-share-buttons, .horizontal-social-links, .hp-ss-share, .huge-share-box, .icn-addthis, .icn-share, .icn-twit, .ico-social, .ico-twitter, .ico-vkontakte, .icoFacebookBig, .icon-facebook, .icon-google-plus, .icon-googleplus, .icon-gplus, .icon-linkedin, .icon-pinterest, .icon-plusone, .icon-social {
display: none;
}

...

useless imho, malicious websites can change classes... I don't know what to say.

Can you please contact their support and ask them?

edit: the list causing this issue is "Fanboy's Social Blocking List"

[tagliala]

reopened just for tracking purposes. We can document it but it's not fontawesome's fault

[deepakprabhakara]

I have reported the issue on their forum. Will report back if I hear anything.

[davegandy]

Yeah, this is a good issue to track.

Freaking AdBlock. Hope folks are aware of their business model. If your Ad company is willing to pay them, they'll let your ads through. This is basically extortion in my book.

[deepakprabhakara]

Yeah but I doubt AdBlock will even bother looking at this. I posted on their forum and the response was to "Turn off social list". I have worked around the issue in my project by redefining the affected icons with a different name.

[greyshi]

There is no contact information on the list's page. Is the list subscribed to by default when installing adblock plus? I think it has been for me.

[tagliala]

Closing this one, #2747 is about docs

[ehcloninger]

I was bit by this today. I agree the issue is with using AdBlock and not sure what can be done for it. Perhaps an alternate name for the items that are obfuscated. Seems like it would be a never-ending escalation, though.

At the very least, could you add another item to https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting that says "Are you using AdBlock?"

[tagliala]

@ehcloninger thanks, added. feel free to edit that wiki I'm non native English speaker

[davegandy]

Interesting. I'm no longer seeing this behavior for Adblock or Adblock Plus (those aren't confusing names at all for different products).

[tagliala]

@davegandy I confirm this is still an issue.

During the first run, you will be asked if you want to enable the "Remove Social Media Buttons" options. If you enable that, no (very popular) social icons

[uxmoon]

I had to use fontello.com, select only the necessary icons for my site and customize the facebook icon name under "Customize names" and it did the trick.
I only need 10 icons for my website.

[ThomasGreiner]

Adblock Plus and other adblockers are using filter lists such as Fanboy's Social Blocking List to determine what should be blocked. It's up to the filter author to decide what should be blocked for those people who have subscribed to the list.

Therefore I'd suggest explaining to him on the EasyList forum why those social media icons shouldn't be blocked in that particular filter list.

[rinopo]

Here's my attempt to overcome this problem, just to share.
Essentially the same as @mlunatico 's solution above but for those who don't use Fontello.

1: In your CSS, add your own alternative class names for the affected icons.
In this example I add my- as a prefix to the original class name.
(Consult the original font-awsome.css raw file for what you should specify as the values of the content: property.)

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

2: Apply the new class name(s) in your HTML.

<i class="fa my-fa-facebook"></i>
<i class="fa my-fa-twitter"></i>

At the moment, the lines in question in Fanboy Social List are as follows, though they may change these at any time.

##.fa-facebook
##.fa-facebook-square
##.fa-google-plus
##.fa-google-plus-square
##.fa-instagram
##.fa-linkedin
##.fa-linkedin-square
##.fa-pinterest
##.fa-share-square-o
##.fa-twitter
##.fa-twitter-square
##.fa-youtube
##.fa-youtube-square

[mrchess]

Still an issue :( fa-youtube-play doesn't work either!

As others also did, I just made a new class for the icons. How annoying...

[tagliala]

@mrchess we will not fix this issue, title edited

[kallevaravas]

This is so long topic, I'm not sure if you got the solution yet. But its fairly easy fix.
Lets take .fa-youtube-play, it contains the term youtube and there for as a social network, gets blocked.

So in CSS:

.fa-youtube-play:before {
  content: "\f16a";
}

Lets change that to:

.fa-youtube-play:before,
.fa-utuuuubeeee:before {
  content: "\f16a";
}

Now you can use the youtube play icon as such <i class="fa fa-fw fa-utuuuubeeee"></i>.

In theory this should work for most blockers. As they don't detect the icon or graphic, but the term in the class. So if your class has the term ad it will block it, but a wont get blocked of course.

This solution works in FF 31.0. Test it guys, and let me know, if it works for others in other platforms too.

PS: FontAwesome has changed the world for all developers and designers merged. Thank you, sincerely thank you for this solution!

[tagliala]

@kallevaravas

thanks. Your solution works and is the workaround advised here: http://fontawesome.io/icons/#brand

Warning!
Apparently, Adblock Plus can remove Font Awesome brand icons with their "Remove Social Media Buttons" setting. We will not use hacks to force them to display. Please report an issue with Adblock Plus if you believe this to be an error. To work around this, you'll need to modify the social icon class names.

It is not Adblock Plus's direct fault as you can read here: https://github.com/FortAwesome/Font-Awesome/issues/1799#issuecomment-49739568

I also tried to post on Fanboy's list forum but I wasn't able to start a thread.

[kallevaravas]

I came here to complaint that my youtube-play button is gone. And then remembered, that I recently added social sharing buttons on my portal and icons went away, because I use adblock for developing. And then hit myself on the head, youtube is too a social media site... So now its uutuuubeee and lives on.

However, I don't quite understand why adblock should block social sharing buttons. It makes no sense to me.

[jarv]

Here is a gist that defines classes to workaround the ublock/adblock issue if anyone wants the full list
https://gist.github.com/jarv/ec34057d8e8138c8b921

[davegandy]

I'm re-opening this for 5.0. I have some ideas for a fix.

[rockstardev]

@davegandy Thanks for deciding to fix this.

[gameguy43]

@ThomasGreiner Thanks for the clarification.

But FWIW, I disagree slightly that ABP is completely neutral on this issue.

This blog post:
https://adblockplus.org/blog/about-that-facebook-tracking-thing
and this page:
https://adblockplus.org/en/features#socialmedia

Contain /descriptions/ of what fanboy-social will do for you. Those descriptions focus on sharing buttons that track you even when you don't engage with them. They /don't/ make it clear that e.g. social LOGIN buttons will be effected.

(yes, whole login buttons disappear: https://github.com/lipis/bootstrap-social/issues/50)

I'd suggest ABP ought to adjust its /descriptions/ of fanboy-social to be more clear. OR, if they'd rather remain neutral, to stop endorsing it at all.

As things stand, I claim that from the perspective of an average ABP user who reads one of those pages, agrees that she doesn't like being tracked by Facebook share buttons she doesn't engage with, and installs the filter...it's a BUG that icons and indeed /whole login buttons/ suddenly disappear. I know anecdotally I've had a few users who were confused and frustrated that in some browsers they couldn't log in to my website.

(I've also emailed the fanboy-social maintainer at [email protected] directly. If people agree this is a bug in fanboy-social, they might consider doing the same.)

I don't intend to point fingers here. There are probably people who /want/ to block social login buttons, and it makes sense to me for ABP, with some customization, to provide that functionality. I think we just need to tighten up the the messaging so users don't get unexpected behavior and these projects don't have to play cat and mouse :)

IMO the first step there is drawing some distinctions in what /kinds/ of social things you might want to block. My first guess at that is something like (1) only things that track you without you even clicking (2) all share buttons ('I never want to share so don't even ask me'), but not login buttons (3) anything having anything to do with social, including sharing and logging in.

[My1]

I think if this will be fixed the title should be changed as well...
but the question is that this is probably the good old "cat and mouse game" as we Germans like to say since that Fanbox-whatever may update the list again if we made new classes for the buttons. but it shouldnt be this way, true, removing tracing buttons (or at least making them 2-click) is clearly okay but not removing all icons and stuff of facebook where you just wanna make a nicely illustrated link to your PB site or whatever.

[tagliala]

@My1

thanks for reporting this, title fixed.

[My1]

no problem.

[haydenk]

The simplest solution, if you're using font awesome sass files, you can change the $fa-css-prefix variable to something other than fa.

Before: $fa-css-prefix: fa !default;
After: $fa-css-prefix: fu !default;

So, now all the Font Awesome icons will be available at .fu.fu-twitter, .fu.fu-facebook, etc.

[tagliala]

@haydenk best prefix ever :)

[cydrobolt]

Disabling "fanboy's annoyances" fixed the issue for me.

[EmilMoe]

Sorry for picking it up again, but this is still not fixed. It's a simple matter of a renaming, so could we get an alias for all the social icons?

[rinopo]

@EmilMoe
Any aliases can be systematically blocked once they are systematically provided.
I'd recommend defining your own aliases as suggested in the previous comments:

https://github.com/FortAwesome/Font-Awesome/issues/1799#issuecomment-50438859
https://github.com/FortAwesome/Font-Awesome/issues/1799#issuecomment-147115123

[EmilMoe]

Perfect - Thanks, @rinopo

[rhanajoy]

Hi! I'm the Community Manager for AdBlock. For the record, Adblock Plus (ABP), our friendly rival, is the company that maintains the Acceptable Ads program, not us. (Why the names are so similar is an interesting bit of Internet history trivia.)

I've written an article for our Knowledge Base that attempts to summarize the workarounds suggested here: AdBlock blocks Font Awesome social media icons.

Rhana
AdBlock Community Manager

[Akronix]

Hi!
I'm experiencing this issue using bulma. Is there any way to show an alternative text in case adblock blocks the icon?
For example, we could use the unicode for the icons in case AdBlock is blocking the font-awesome code.

[Paulmicha]

@rhanajoy How about fixing the defaults of the extension itself, instead of having everyone to fix it via settings ?

Because, arguably, things like external links to sites' facebook pages, often using these icons, do not qualify as ads. Same goes for the icons themselves (CSS or SVG) - different than typical ad techs like iframes or JS tracking.

This looks like an AdBlock issue, which could perhaps consider not including these particular lists in the first place.

[rhanajoy]

@Paulmicha AdBlock currently subscribes users to four filter lists by default: EasyList, the primary list of ad-blocking filters that all ad blockers use; AdBlock Custom, which cleans up a few troublesome filters from EasyList and other filters that break specific sites, and adds blocks for ad providers EasyList doesn't care about; Acceptable Ads, which blocks intrusive, annoying ads while allowing ads that promise to be good (how faithfully some ads adhere to the AA guidelines is up for debate); and the Adblock Warning Removal list, which prevents you from seeing warnings to disable your ad blocker on some sites.

We also include some lists that are available by selection but are not enabled by default. Among them is Fanboy's Annoyances, which includes Fanboy's Social list. That's the one that's causing trouble with Font Awesome's social media icons.

Finally, users can subscribe to any list they like if they know its URL.

All of the above is true for ABP as well, with some slight differences.

So you see there really isn't any way we can prevent this on the extension side. It's a filter list issue, and we don't maintain the filter lists. I wish we _could_ help! It would make things easier for our users, which is my chief concern.

[ThomasGreiner]

This looks like an AdBlock issue, which could perhaps consider not including these particular lists in the first place.

As @rhanajoy pointed out, such lists are not included by default in AdBlock or Adblock Plus. Also, as mentioned in my previous comment, I'd suggest discussing the scope of this particular filter list with the EasyList team or alternatively reporting individual issues using the issue reporter in Adblock Plus for Firefox.

What Adblock Plus does is recommend certain filter lists by providing its users the ability to easily enable popular features. So if there's a well-maintained filter list that blocks social media elements without breaking unrelated stuff, feel free to suggest it to be used for the "Remove social media buttons" feature.

[Paulmicha]

such lists are not included by default in AdBlock or Adblock Plus

Then I must have added them in the past (though I don't remember doing that, but it's possible, as I've been using this extension for years now).

So by default, this issue shouldn't happen for users who haven't touched the extension settings then.
Thanks for the feedback !

[tagliala]

such lists are not included by default in AdBlock or Adblock Plus

Then I must have added them in the past (though I don't remember doing that, but it's possible, as I've been using this extension for years now).

Not a default, but IIRC it was extremely easy to enable that option: https://github.com/FortAwesome/Font-Awesome/issues/1799#issuecomment-24030031

[ThomasGreiner]

Not a default, but IIRC it was extremely easy to enable that option: #1799 (comment)

Adblock Plus exposes that option only on the page that comes up right after successful installation. Recently, we removed that section from that page though (see https://issues.adblockplus.org/ticket/4294).

The plan is, however, to reintroduce it later on as part of the extension's settings page. For that we're planning to use the following text:

Disable Social Media Buttons

Adblock Plus can disable social media buttons on websites, ensuring that social networks can’t create a profile based on the websites you visit.

Buttons used to share content on social media platforms such as Facebook, Twitter, Google Plus and others are placed on almost every website that you visit. Even if you don't click them, these buttons send requests to the servers of the social network which use information to create a profile based on your browsing habits.

If you think that this text should be changed, I created an issue on our issue tracker for discussing those (see https://issues.adblockplus.org/ticket/4434).

[rhanajoy]

Wow. I blush to admit that I never knew those buttons did that. Now it makes more sense to me why the Social list would block them.

[gameguy43]

@ThomasGreiner replying in that ticket now

[gameguy43]

@rhanajoy, they _don't_ do that, necessarily. Only the official widgets that use JS/iframes track you.

Which if you're using fontawesome, you're probably building your own buttons, which don't track people. But you're blocked anyway.

And _that's_ the whole issue here. Non-tracking buttons are being broken by a block list that sells itself as blocking tracking buttons _only_.

Worse: it's blocking _login_ buttons. Which are not tracking. And are not social sharing buttons. So they're entirely out of the scope of what the block list sells.

For a website like mine, where social login is the _only_ way to log in, this block list _fundamentally breaks the entire website_.

The current copy and @ThomasGreiner's new copy do not make it clear to users that enabling this list may disable their ability to log in to websites. Log in is not mentioned.

[rhanajoy]

@gameguy43 Thanks for clarifying that. Well, we can at least revise our descriptions of the Social list to mention this. I'll do that now in our KB and will create an issue to see whether we can change the description in the extension, too.

[ryanbr]

Okay, didn't relise there was another open ticket..

From: ​https://lipis.github.io/bootstrap-social/

  <a class="btn btn-social-icon btn-twitter">
    <span class="fa fa-twitter"></span>
  </a>

  <a class="btn btn-block btn-social btn-twitter">
    <span class="fa fa-twitter"></span> Sign in with Twitter
  </a>

Might be happier if Font-Awesome removed the class social suggestion's of using the

btn-twitter
btn-facebook
btn-[....]
btn-social-icon

Then we can simply remove the specific fa-[elements] from the social list.

[ryanbr]

No response?

[david-w]

@ryanbr THANK YOU for removing the generic Font Awesome social icons from the Fanboy Social List!

[rhanajoy]

I've updated our KB article accordingly (https://help.getadblock.com/solution/articles/6000148708-adblock-blocks-font-awesome-social-media-icons).

[slawa-dev]

Fri, 23 Sep 2016 M: Remove font-awesome generic filters
https://hg.adblockplus.org/easylist/rev/3164f12b604f

Issue can be closed?

[tagliala]

@MrSlawa I can confirm it is not an issue for me, let's wait some other feedback

[slawa-dev]

@eridal https://github.com/FortAwesome/Font-Awesome/issues/1799#issuecomment-256830065

[ExpertUser]

Today I got css files of stackoverflow.com blocked by adblock :(
Moreover, few other sites have similar problem of loading.
Fontawesome are being blocked too

[qumberrizvi]

I have seen instances of googlefontapi being blocked by AdGuard. As soon as AdGuard detects any third-party CSS being used on a webpage, the adblocker blocks it.

[GiacomoLaw]

How can I stop them from being blocked? Just redefine the names?

[tagliala]

How can I stop them from being blocked? Just redefine the names?

That would work

[jessuppi]

+1 that linkedin-in icon is currently being blocked again by Adblock (Chrome extension)

For some reason, most other social icons seem fine at this time.

Why are non-tracking icons still being blocked by Adblock? No relation to social tracking... millions of users can't be expected to install custom lists just to make icons appear properly.

[tagliala]

Why are non-tracking icons still being blocked by Adblock?

Please report the issue to the offending list, explaining that the icon itself has no impact on user's privacy.

millions of users can't be expected to install custom lists just to make icons appear properly.

In a broader sense, if "no social" lists are supposed to block "any social network related content" and the user deliberately opted-in for this feature, blocking lists are working as intended

[Burnett01]

Renaming seems to be the only option for now. At least this is what we end up doing.
We don't want to rely on AdBlock's list.