不能使用任何带有“-o”结尾的 Fontawesome 图标答案

【问题标题】：Can't use any Fontawesome icon with "-o" ending不能使用任何带有“-o”结尾的 Fontawesome 图标
【发布时间】：2018-06-26 08:54:37
【问题描述】：

对于一个网站，我想使用 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>

【问题讨论】：

唯一可能的解释是您的字体真棒文件已过时。你确定是对的吗？
您能否提供您的代码示例，说明发生在哪里？
@trichetriche 是的，我下载了最新版本 5.0.4。
@MykolaSenechyn 上面的例子是我在我的网站上使用的确切代码。
我认为他的意思是你的整个代码，比如你如何导入字体

标签： html css icons font-awesome font-awesome-5

【解决方案1】：

TL;DR

使用： <i class="far fa-heart" aria-hidden></i>

说明：

自 Font Awesome 第 5 版以来，发生了一些变化。

网站：

旧网站http://fontawesome.io/ 适用于版本 4.X
第 5 版，您可以在 https://fontawesome.com 找到
在此处搜索图标：https://fontawesome.com/icons

变化（不是全部）：

fa 已更改为 far（字体真棒常规）
所有-o 图标都已集成到常规样式和-o 左侧

这里是upgrade guide from v4 to v5

【讨论】：

谢谢！现在一切正常。我想知道为什么有多个“官方”网站.. 两个似乎都是最新的，但 fontawesome.com 是最新的。
他们改变了它，现在fontawesome.io 网站重定向到fontawesome.com 一个

【解决方案2】：

这是你想要的吗？

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<i class="fa fa-heart-o" aria-hidden="true"></i>

【讨论】：

谢谢，CDN 版本似乎可以工作，但您使用的是 Fontawesome 版本 4.7.0。我们很高兴知道为什么它不适用于最新版本 5.0.4。但如果没有人提供最新版本的解决方案，我会接受你的。

【解决方案3】：

我猜你使用的是 font awesome 版本 5，在 regular 之间指定图标的样式：far fa-heart、solid： fas fa-heart 和 light：fal fa-heart。如果您使用fa fa-heart，默认情况下将使用solid 版本。

将鼠标悬停在此链接上可查看各种图标样式：https://fontawesome.com/icons?d=gallery&q=heart

在 v5 中，没有 fa fa-heart-o。它适用于 v4。否则使用 v4 的 CDN。

【讨论】：

【解决方案4】：

使用 class="far fa-heart" 表示常规心脏（轮廓），class="fas fa-heart" 表示固体心脏

【讨论】：