对于一个网站，我想使用来自 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”将图标添加到我的元素中。使用 this link搜索图标，例如“心”。
按照要求，我的整个代码:
<!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>
最佳答案
使用:
<i class="far fa-heart" aria-hidden></i>
解释:
自 Font Awesome Version 5 以来，一些事情发生了变化。
网站:
- 旧网站http://fontawesome.io/适用于版本 4.X
- 版本 5 您可以在 https://fontawesome.com 找到
- 在此处搜索图标:https://fontawesome.com/icons
变化(不是全部):
-
fa已更改为far( Font Awesome 常规) - 全部
-o图标已集成为常规样式并位于 -o 的左侧
关于html - 不能使用任何以 "-o"结尾的 Fontawesome 图标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48301739/