要自定义 Bootstrap 导航栏的切换图标,你可以使用 Font Awesome 或其他图标库,或者使用自定义的 SVG 图标。以下是使用 Font Awesome 图标库的方法:
<head>
部分添加以下代码:<!-- 引入 Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- 引入 Font Awesome CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<button>
标签中,使用 Font Awesome 的图标类替换默认的图标。例如,将 data-toggle
和 data-target
属性保持不变,将默认的 <span class="navbar-toggler-icon"></span>
替换为 <i class="fas fa-bars"></i>
:<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
fa-bars
类为相应的 Font Awesome 图标类即可。例如,如果你想使用 fa-align-justify
图标,可以将 <i class="fas fa-bars"></i>
替换为 <i class="fas fa-align-justify"></i>
。这样,你就成功地自定义了 Bootstrap 导航栏的切换图标。
领取专属 10元无门槛券
手把手带您无忧上云