1

Making use of bootstrap 4 and Material Icon in a Nav bar and icons are not aligned properly

You may see that in this fiddle https://jsfiddle.net/saamisolutions/7phge3ro/5/ 

<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">
                            <i class="material-icons">home</i>Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="material-icons">build</i>Configuration</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="material-icons">person</i>User Admin</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="material-icons">more_horiz</i>More</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
mhrabiee
  • 805
  • 10
  • 23
Swamy
  • 463
  • 2
  • 9
  • 20
  • 1
    I recommend you to use font awesome icons rather than materialize when you are using Bootstrap. If you club material and bootstrap the css will be having some issues – Sai Manoj Jul 07 '19 at 02:14

2 Answers2

2

Just add this code to your code. 

a.nav-link {
    display: flex;
    align-items: center;
}

here is the working codepen for your code. https://codepen.io/irinnahar/pen/KjGpoL

Irin
  • 1,274
  • 1
  • 8
  • 9
  • 1
    What you do here is just fixing this _specif_ markup and classes. The real issue is remain in other places of code when using material icons. – mhrabiee Jul 07 '19 at 09:40
1

You can use css vertical-align to fix this issue. I recommend to apply to all Material Icons.

.material-icons {
  vertical-align: middle;
}

Alternatively you may use margin-right: 5px for a bit more breathing space.

See the fiddle: https://jsfiddle.net/mhrabiee/t0ynL69w/1/

mhrabiee
  • 805
  • 10
  • 23