Question

我正在尝试使用超棒的字体自定义引导程序的导航栏切换图标，但是我的代码为什么不起作用？我正在使用超棒的CDN。

<span class="navbar-toggler-icon">
     <i class="fas fa-navicon" style="color:#fff; font-size:28px;"></i>
</span>

此代码在bootstrap的汉堡包切换图标上仅显示2条白线。

Answer 1

我假设您使用的是BS4x。您只需要重置默认的SVG背景图片并在CSS中指定所需的替代图片即可：

<span class="navbar-toggler-icon"></span>

.navbar-toggler-icon {
  background-image: none;
}
.navbar-toggler-icon::before {
  font-family: FontAwesome;
  content: "\f0c9"; /* fa-bars, fa-navicon */
}

FontAwesome用于FA v5使用'Font Awesome\ 5 Free'（afaik）

通过这样，您还可以避免使用脏的内联CSS。只需将color和font-size之类的所需规则应用于.navbar-toggler-icon::before类。

Answer 2

Font Awesome 5中没有fas fa-navicon。Font Awesome 5中使用fas fa-bars。

您可能会看到来自w3school link的图标参考。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>

<span class="navbar-toggler-icon">
     <i class="fas fa-bars" style="color:#000; font-size:28px;></i>
</span>

自定义引导程序的导航栏切换图标

2 个答案: