Question

我正在尝试在CSS的内容中使用FontAwesome。

它带有图标代码而不是图标。我已经关注了在线帮助，但仍无法正常工作

css
  @font-face {
  font-family: 'FontAwesome';
  src: url('https://use.fontawesome.com/releases/v5.0.6/css/all.css'); 
}


.fp-prev:before {
    color:#fff;
    content: '/f35a';
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}

Answer 1

首先，您只需要在头标记中包含Font Awesome 5的CSS文件：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">

或在CSS文件中：

@import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css")

然后您需要更正 font-family 和内容，如下所示：

＆＃13;

@import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css");

.fp-prev:before {
    color:#000;
    content: '\f35a'; /* You should use \ and not /*/
    font-family: "Font Awesome 5 Free"; /* This is the correct font-family*/
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}

＆＃13;

<i class="fp-prev"></i>

＆＃13;

作为旁注：Font Awesome 5为每组图标提供3种不同的font-family：

Font Awesome 5 Free免费图标。

Font Awesome 5 Brands用于Facebook，Twitter等品牌图标

＆＃13;

@import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css");

.fp-prev:before {
    color:#000;
    content: "\f099"; 
    font-family: "Font Awesome 5 Brands";
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}

＆＃13;

<i class="fp-prev"></i>

＆＃13;

<{3}}

的

Font Awesome 5 Pro

Answer 2

设置您的font-weight: 900;。我看到你想念

Answer 3

由于颜色问题而未显示。请按照步骤:-

步骤- 1. 在您的页面中复制此样式

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css">

第 2 步：将此代码复制到页面中 all.css 的顶部。

@import url("https://use.fontawesome.com/releases/v5.14.0/css/all.css");

Step- 3. 使用 font-family 和 content 和 color like

   .password_invalid:before {
        color: #ff0000;
        content: '\f058';                     /* You should use \ and not /*/
        font-family: "Font Awesome 5 Free";  /* This is the correct font-family*/
        position: relative;
        margin-left: -36px;
        padding-right: 13px;
        font-weight: 400;
    }

Answer 4

当您想要包含FontAwesome时，您提供的网址应位于head标记内作为stylesheet文件：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css">

然后你可以像你一样使用Font Awesome。

Answer 5

我知道我真的来晚了。但是被接受的答案并没有帮助我。经过一些研究后，我发现了这一点。

您必须在标题中包含Fontawesome CSS。

CDN-

steps_per_epoch

如果您已经下载了源文件，则包括以下内容

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">

稍后您必须添加CSS如下-

<link rel="stylesheet" href="path-to-your-font-awesome-folder/css/all.min.css" />

如果您希望通过.fp-prev:before { color:#000; content: '\f35a'; /* replace / with \ */ font-family: "Font Awesome 5 Free"; /* here is the correct font-family */ font-style: normal; font-weight: 900; text-decoration: inherit; }标签添加它，则可以遵循

<i>

确保您的字体粗细为900。

引荐-https://github.com/FortAwesome/Font-Awesome/issues/11946

在GitHub中提出了同样的问题。他们建议，对于纯字体真棒图标，<i class="fas fa-arrow-alt-circle-right"></i>应该为font-weight。

希望这对您有帮助。

Answer 6

这也发生在我身上。我曾经使用过这个图标：就像使用字体真棒5 CDN一样。

但是当我尝试选择相同的类然后编辑图标时，css编辑没有在图标上运行。

因此从css选择器上的“ .fas fa-plus-square”中删除了“ fas”，并将其设置为“ .fa-plus-square {}”。

所以CSS对我来说是这样的：.fa-plus-square{ float: right; }，在这里我删除了“ fas”。它对我有用。

Html类为<i class="fas fa-plus-square"></i>

的地方

我使用的CDN：“ https://use.fontawesome.com/releases/v5.0.7/css/all.css”。希望这对您有帮助

字体真棒5，为什么css内容没有显示？

6 个答案: