Topic: Social Media Icons Do Not Display
jlstory free 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 -->
jlstory free 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
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: Other
- MDB Version: -
- Device: MacBook Pro
- Browser: All
- OS: Catalina
- Provided sample code: No
- Provided link: No