时间戳

首页 > 解决方案 > 如何更改引导程序中的默认“导航栏切换器”按钮图标？

html - 如何更改引导程序中的默认“导航栏切换器”按钮图标？

问题描述

我到处搜索并尝试了多种方法，但我似乎无法让它与我的代码一起使用。我正在尝试更改navbar-toggler引导程序中的默认汉堡按钮图标并使用自定义 Font Awesome 图标。这是我的代码：

HTML：

<nav class="navbar navbar-expand-lg navbar-dark fixed-top navbar-custom">
  <div class="container">
    <!-- Logo Deciding Where To Put It-->
    <!--<a class="navbar-brand" href="images/KevinLogo01.png"></a>-->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarcustom"
      aria-controls="navbarcustom" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarcustom">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home
            <span class="sr-only">(current)</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Work</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

CSS：

span.navbar-toggler-icon::after {
color: white;
font: normal normal normal 14px/1 FontAwesome;
}

标签： htmlcssbootstrap-4font-awesomehamburger-menu

解决方案

如果您只想使用 CSS 更改它，那么这个片段可能是您问题的答案 -

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
        <script src="https://use.fontawesome.com/a03fb08303.js"></script>
<style>
    .navbar-dark .navbar-toggler-icon {
        background-image: none;
    }

    .navbar-dark .navbar-toggler-icon::after {
        content: "\f0c9";
        font-family: "FontAwesome";
        font-size: 22px;
        color: #333;
    }
</style>
        
<nav class="navbar navbar-expand-lg navbar-dark fixed-top navbar-custom">
    <div class="container">
        <!-- Logo Deciding Where To Put It-->
        <!--<a class="navbar-brand" href="images/KevinLogo01.png"></a>-->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarcustom" aria-controls="navbarcustom" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse bg-dark" id="navbarcustom">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">
                        Home
                        <span class="sr-only">(current)</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Work</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

如果你想只使用 HTML 来改变它，那么这个可能就是答案，删除跨度navbar-toggler button并用 font-awesome 像这样替换它 -

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarcustom"
      aria-controls="navbarcustom" aria-expanded="false" aria-label="Toggle navigation">
    <span class="fa fa-bars fa-2x text-dark"></span>
</button>

这是此片段中的一个完整示例，让我知道哪个对您有帮助，或者您需要其他东西。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/a03fb08303.js"></script>


<nav class="navbar navbar-expand-lg navbar-dark fixed-top navbar-custom">
  <div class="container">
    <!-- Logo Deciding Where To Put It-->
    <!--<a class="navbar-brand" href="images/KevinLogo01.png"></a> -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarcustom"
      aria-controls="navbarcustom" aria-expanded="false" aria-label="Toggle navigation">
      <span class="fa fa-bars fa-2x text-dark"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarcustom">
      <ul class="navbar-nav ml-auto bg-dark">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home
            <span class="sr-only">(current)</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Work</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

推荐阅读