Social Media Icons Do Not Display


Topic: Social Media Icons Do Not Display

jlstory asked 4 years ago

Expected behavior The navbar uses:

      <ul class="navbar-nav nav-flex-icons">
        <li class="nav-item">
          <a class="nav-link"><i class="fab fa-facebook-f"></i></a>
        </li>
        <li class="nav-item">
          <a class="nav-link"><i class="fab fa-twitter"></i></a>
        </li>
        <li class="nav-item">
          <a class="nav-link"><i class="fab fa-instagram"></i></a>
        </li>
      </ul>

So, I should see social media icons to the right.

Actual behavior The cursor changes to pointer on hover, but no icons are displayed

Resources (screenshots, code snippets etc.)

I cannot find fa-facebook-f, fa-twitter, or fa-instagram in the mdb.css document. Should these classes be present in the document?

Navbar Code:

<!--Navbar -->
<header>

  <nav class="navbar fixed-top navbar-expand-lg navbar-dark scrolling-navbar">
    <a class="navbar-brand" href="#"><img src="img/puzzle.png" class="puzzle-logo" alt="puzzle-logo"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="html/about.html">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="html/contact.html">Contact</a>
        </li>
      </ul>
      <ul class="navbar-nav nav-flex-icons">
        <li class="nav-item">
          <a class="nav-link"><i class="fab fa-facebook-f"></i></a>
        </li>
        <li class="nav-item">
          <a class="nav-link"><i class="fab fa-twitter"></i></a>
        </li>
        <li class="nav-item">
          <a class="nav-link"><i class="fab fa-instagram"></i></a>
        </li>
      </ul>
    </div>
  </nav>

</header>
<!--/ Navbar -->

Marcin Luczak staff answered 4 years ago

Hello jlstory,

You've used .navbar-dark class for navigation, which by default will make any content inside the navbar white. Because you didn't add any background color class, e.g. .bg-dark, you could only see white icons and content on white background and hover effects. Please see fixed navbar in my snippet: https://mdbootstrap.com/snippets/jquery/marcin-luczak/2648423.

You can also check our color section for navbar: https://mdbootstrap.com/docs/standard/navigation/navbar/#section-colors

Best regards, Marcin


jlstory answered 4 years ago

Thanks Marcin!

I was actually using css to place color, but I neglected to add the script to the head from font awesome to make the icons available... This is my first time working with mdb, so please excuse me.

Thanks for the help!


Marcin Luczak staff commented 4 years ago

You're welcome, we are here to help you with our products.

Regards, Marcin


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: Other
  • MDB Version: -
  • Device: MacBook Pro
  • Browser: All
  • OS: Catalina
  • Provided sample code: No
  • Provided link: No