对于一个网站,我想使用 fontawesome 的图标。例如我需要使用心形图标:
作品:
<i class="fa fa-heart" aria-hidden="true"></i>
该图标可作为填充版本或仅提供轮廓,我只需要图标的“轮廓”版本。要获得大纲版本,您只需通过添加“-o”来更改相应的 CSS 类,如下所示:
不起作用:
<i class="fa fa-heart-o" aria-hidden="true"></i>
但只是不显示“-o”版本。fontawesome 网站上声明了许多图标,可以在其中添加“-o”以仅显示轮廓。但是当我尝试时,它们都没有显示。正常的图标工作。我还在所有下载的 CSS 文件中搜索了“-o”声明,但没有找到任何东西!好像他们没有实施它..
我找不到问题。在我看来,他们“忘记”在最新的 Fontawesome 5.0.4 文件中实现“-o”版本。
PS:我通过下载 CSS 文件“fontawesome-all.min.css”将图标添加到我的项目中。使用此链接搜索图标,例如“心脏”。
像要求的那样,我的整个代码:
<!DOCTYPE html>
<head>
<link href="http://127.0.0.1:8000/css/fontawesome-all.min.css" rel="stylesheet">
<link href="http://127.0.0.1:8000/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<h6 class="card-title">Some Title</h6>
<!-- Stats -->
<p class="card-text font-weight-light">
<span class="mr-4"><i class="fa fa-comment" aria-hidden="true"></i>0</span>
<span class="mr-4"><i class="fa fa-heart" aria-hidden="true"></i>0</span>
<span><i class="fa fa-star" aria-hidden="true"></i>0</span>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Scripts -->
<script src="http://127.0.0.1:8000/js/jquery-3.2.1.min.js"></script>
<script src="http://127.0.0.1:8000/js/bootstrap.min.js"></script>
</body>
</html>