Topic: Navigation toggle icons does not show
Expected behavior
I am creating an website based on Laravel 8 Framework and I am using mdb pro 3.8.1 as front-end framework. I have placed mdb.mins.css and mdb.min.js file in the public folder and I am imported in my html with link and script elements respectively. I have copied an example of the navbar from the documentation which should have showed the three bars when the navbar is collapsed
Actual behavior
However when the navbar is collapsing the toggle icons ( the three bars) does not show. I have also imported bootstrap icons package via cdn, altough the documentation does not say explicitly that such import is required, but the result is the same, the icon is not there (the i html elements is 0x0in size). Obviously clicking it does not trigger the expansion of the navbar. There are any special requirements for using the bootstrap icons?
Resources (screenshots, code snippets etc.)
This is my navigation blade component
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-mdb-toggle="collapse" data-mdb-target="#MainNavbar"
aria-controls="MainNavbar" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="MainNavbar">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a href="/" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="/about" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="/clients" class="nav-link">Clients</a>
</li>
</ul>
</div>
</div> </nav>
And this is my blade layout component
<!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<title>Legal Hub</title>
<!-- Styles --> {{-- <link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">--}}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrapicons@1.5.0/font/bootstrap-icons.css">
<link href="{{ asset('css/mdb.min.css') }}" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
@yield('content')
</div>
{{-- <script src="{{ asset('js/jquery.min.js') }}" defer></script>--}}
{{-- <script src="{{ asset('js/popper.min.js') }}" defer></script>--}}
{{-- <script src="{{ asset('js/bootstrap.min.js') }}" defer></script>--}}
<script src="{{ asset('js/mdb.min.js') }}" defer></script>
</body>
From what I can see you are importing Bootstrap separately. MDB already has Bootstrap in it. Importing it separately can cause errors.
ltanase pro commented 3 years ago
The link importing Bootstrap is commented out based on blade syntax. There is no import of Bootstrap separately. The functionality of expanding the navbar works if I click where the three bars should be located. However I cannot see the three bars that should be generated by icon element.
ltanase pro commented 3 years ago
Actually no icon is rendered even if i placed them elsewhere.
I have solved it. It seems that the examples on documentation are based on fontawesome icons. I was importing bootstrap icons but used the icons names from fontawesome.
Because the docs section regarding the icons does not say explicitly that you need to include the icons library, at first I thought that they are already included.
Then I tried using bootstrap icons library but because the example codes were made based on fontawesome library no icon was rendered of course.
I think it should be more clear in the docs that you need to import the icons library.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: No
- Technology: MDB Standard
- MDB Version: MDB5 3.8.1
- Device: Asus Desktop
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No