不能使用任何以“-o”结尾的 Fontawesome 图标

Question

对于一个网站，我想使用来自 fontawesome 的图标。例如我需要使用心形图标：

有效：

<i class="fa fa-heart" aria-hidden="true"></i>

图标有填充版或轮廓版，我只需要"outline"版的图标。要获得大纲版本，您只需通过添加“-o”来更改相应的 CSS class：

不起作用：

<i class="fa fa-heart-o" aria-hidden="true"></i>

但是没有显示“-o”版本。在 fontawesome 网站上声明了许多图标，可以在其中添加“-o”以仅显示轮廓。但是当我尝试时，它们中的 none 会显示出来。正常图标工作。 我还在所有下载的 CSS 文件中搜索了“-o”声明，但没有找到任何东西！好像他们没有实施它..

我找不到问题。在我看来，他们 "forgot" 在最新的 Fontawesome 5.0.4 文件中实施“-o”版本。

PS：我通过下载 CSS 文件 "fontawesome-all.min.css" 将图标添加到我的项目中。使用 this link 搜索图标，例如"heart".

如要求，我的全部代码：

<!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>

Answer 1

这是你想要的吗？

<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>

Answer 2

TL;DR

使用： <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（字体真棒常规）
所有 -o 图标已集成到常规样式中，并在 -o

这里是upgrade guide from v4 to v5

Answer 3

我猜你使用的是 font awesome version 5，请指定 regular 之间的图标样式: far fa-heart, solid: fas fa-heart and light: fal fa-heart.如果您使用 fa fa-heart，默认情况下将使用纯色版本。

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

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

的 CDN

Answer 4

使用 class="far fa-heart" 表示普通心形（轮廓），class="fas fa-heart" 表示实心形

不能使用任何以“-o”结尾的 Fontawesome 图标

Can't use any Fontawesome icon with "-o" ending

html

css

icons

font-awesome

font-awesome-5