0

I had two persons telling me they can't see the social media in the top right of my website due to font-awesome. Do you know if there's a fix for this?

<nav class="navbar navbar-default navbar-fixed-top m-d-2">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-main" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">Mona Jalal</a>
        </div>
        <div id="top-menu" class="collapse navbar-collapse" id="nav-main">
            <ul class="nav navbar-nav">
                <li class="active"><a class="nav-item nav-link page-item" href="education.html">Education</a></li>
                <li><a class="nav-item nav-link page-item" href="coursework.html">Coursework</a></li>
                <li><a class="nav-item nav-link page-item" href="teaching.html">Teaching</a></li>
                <li><a class="nav-item nav-link page-item" href="projects.html">Projects</a></li>
                <li><a class="nav-item nav-link page-item" href="honors.html">Honors & Awards</a></li>
                <li><a class="nav-item nav-link page-item" href="experience.html">Experience</a></li>
            </ul>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a class="navbar-brand pull-sm-right" href="https://github.com/monajalal"><i class="fa fa-github fa-lg"></i></a></li>
                <li><a class="navbar-brand pull-sm-right" href="https://twitter.com/MonaJalal_"><i class="fa fa-twitter fa-lg"></i></a></li>
                <li><a class="navbar-brand pull-sm-right" href="https://www.linkedin.com/in/mona-jalal"><i class="fa fa-linkedin fa-lg"></i></a></li>
                <li><a class="navbar-brand pull-sm-right" href="http://stackoverflow.com/users/2414957/mona-jalal"><i class="fa fa-stack-overflow fa-lg"></i></a></li>
                <li><a class="navbar-brand pull-sm-right" href="mailto:jalal@cs.wisc.edu"><i class="fa fa-envelope fa-lg" aria-hidden="true"></i></a></li>
                <li div="fa-item"><a class="navbar-brand pull-sm-right" href="https://www.instagram.com/mona_of_green_gables"><i class="fa fa-instagram fa-lg"></i></a></li>
            </ul>
        </div>
    </div>
</nav>
Mona Jalal
  • 34,860
  • 64
  • 239
  • 408
  • did they use firefox? below may be helpfull for you [link](http://stackoverflow.com/questions/16866872/font-awesome-not-working-in-firefox) – Vutuz Jun 27 '16 at 03:08

1 Answers1

4

This has nothing to do with Font Awesome. Most likely they are using the Adblock Plus browser extension and have enabled "Fanboy's Social Blocking List". According to Fanboy site this list will "Hide and block social content, social widgets, social scripts and social icons." It does that well, I use it personally.

Part of the problem is the Adblock Plus installation script asks the user if they want to enable the Fanboy Social Blocking list. This is the description of what that list does from the Adblock Plus site:

Disable Social Media Buttons

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 social network's servers which then uses the information to create a profile based on your browsing habits. Adblock Plus can disable social media buttons from websites, ensuring that social networks cannot create a profile based on the websites you visit.

The above description however, is not complete. It does block those social media buttons that track your browsing habits, but it also blocks simple font based icons that people use to link to their social media and other online accounts.

The fix is either disable the Adblock social media list or change the class names in your site code.

David Watson
  • 195
  • 6