Bootstrap 导航栏中的材质图标未正确对齐答案

【问题标题】：Material Icon in Bootstrap Nav bar is not aligning properlyBootstrap 导航栏中的材质图标未正确对齐
【发布时间】：2019-07-06 15:36:40
【问题描述】：

在导航栏中使用 bootstrap 4 和 Material Icon 并且图标没有正确对齐

你可能会在这个小提琴中看到 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>

【问题讨论】：

我建议你在使用 Bootstrap 时使用 font awesome 图标而不是具体化。如果您使用俱乐部材料和引导程序，css 将会出现一些问题

标签： css bootstrap-4 google-material-icons

【解决方案1】：

只需将此代码添加到您的代码中即可。

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

这里是您的代码的工作代码笔。 https://codepen.io/irinnahar/pen/KjGpoL

【讨论】：

你在这里所做的只是修复这个 specif 标记和类。使用材质图标时，真正的问题仍然存在于代码的其他地方。

【解决方案2】：

您可以使用 css vertical-align 来解决此问题。我建议应用到所有 Material Icons。

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

您也可以使用margin-right: 5px 来获得更多的喘息空间。

见小提琴：https://jsfiddle.net/mhrabiee/t0ynL69w/1/

【讨论】：