html - 为什么我的导航栏(引导程序)上没有显示我的字形图标?
问题描述
我正在为我的网站制作导航栏。
HTML
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#"><span class="glyphicon glyphicon-home" style="color:blue"></span>Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
但是我看不到glyphicon
for home,在我的浏览器中它显示如下:
我的第一个想法是默认情况下颜色可能是黑色的,我看不到它,因此我添加了它,style="colour: blue;"
但它没有任何区别。
有什么想法吗?
解决方案
在Bootstrap 4
,glyphicons
支持被删除, 请使用font-awesome
。
有关更多信息,请访问https://getbootstrap.com/docs/4.4/migration/#components
示例Font-Awesome
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02"
aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">
<i class="fas fa-home" style="color:blue"></i> Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
推荐阅读
- ios - 如何在滚动视图Objective-c iOS中滚动时更改多个UILabel文本颜色
- c# - 创建树状表示的逻辑
- jwt - 使用 OpenIdDict 在 ASP.Net Core 2.1 中从 Google 获取声明
- css - “_card.scss”和“_type.scss”这些是什么以及如何取消它们?(引导程序 4)
- java - Linux 打印许多线程堆栈信息,这是一个问题吗?
- javascript - 使用 HTML 表单和 Ajax 在 PUT 请求中发送文件
- php - 使用php在二维数组中插入查询
- sql-server - 获取百分比与列中的数量
- ibm-cloud - 尝试在 IBM Cloud Functions 中运行代码
- python - 将列表列表分为两部分的好方法,以内部列表中的值为条件