2

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

4 回答 4

15

TL;博士

采用: <i class="far fa-heart" aria-hidden></i>


解释:

自从 Font Awesome 版本 5 发生了一些变化。

网站:

变化(不是全部):

  • fa已更改为far(字体真棒常规)
  • 所有-o图标都集成在常规样式中并在 -o 左侧

这是从 v4 到 v5 的升级指南

于 2018-01-17T16:37:58.100 回答
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>

于 2018-01-17T13:08:45.940 回答
0

我猜您使用的是 font awesome 版本 5,在常规far fa-heartsolidfas fa-heartlightfal fa-heart之间指定图标的样式。如果您使用fa fa-heart,默认情况下将使用solid 版本。

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

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

于 2020-04-30T13:48:56.120 回答
-1

使用 class="far fa-heart" 表示常规心脏(大纲),使用 class="fas fa-heart" 表示坚固的心脏

于 2020-06-23T22:44:06.363 回答