Question

我无法在弹出窗口中添加“真棒字体”图标。请帮我弄清楚它是如何工作的。我不知道如何在CSS中添加图标和更改颜色。

这是HTML

<i class="fas fa-check-circle">

这是CSS：

.fa-check-circle {color: #ffffff;}

怎么了？没用我在弹出窗口上看不到该图标。 Here is my pin

Answer 1

Fontawesome库未添加。添加

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

fontawesome start page

Answer 2

通过以下方法更改CSS：

.fas {
   color: red;
}

Answer 3

问题是您没有使用超棒的CDN，CDN是一个内容交付网络，它是指地理上分散的服务器组，它们一起工作以提供Internet内容的快速交付。 CDN可以快速转移加载Internet内容所需的资产，包括HTML页面，javascript文件，样式表，图像和视频

在您的情况下，您使用过的类（fas fa-check-circle）写在超棒的字体服务器内。要访问它们，您应该链接您的网页。为此，请使用以下链接

<link rel="stylesheet" 
href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" 
integrity="sha384- 
 B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" 
  crossorigin="anonymous">

使用fontawsome图标的另一种方法是下载其整个图标库，其中将包含它们的脚本和类，并将它们直接链接到您的页面

Answer 4

替换此-

<i class="fas fa-check-circle">

使用

<i class="fa fa-check-circle">

Answer 5

从代码中尚不清楚您是否在页面中添加了很棒的字体。将此行（标签之间）添加到您的页面。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

如何添加和更改字体真棒图标

5 个答案: