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

Question

我正在尝试使用 font-awesome 自定义 bootstrap 的导航栏切换器图标，但我的代码不起作用，为什么？我正在使用 font-awesome CDN。

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

此代码在引导程序的汉堡切换图标上仅显示 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，用于 FA > v5 'Font Awesome\ 5 Free'(afaik)

通过这种方式，您还可以避免脏的内联 CSS。只需将所需的规则（例如color和 ）font-size应用于.navbar-toggler-icon::before类。