代码之家 › 专栏 › 技术社区 › TheWebs

Font Awesome 5免费版不适用于SCSS[副本]

font-awesome-5 font-awesome css

TheWebs · 技术社区 · 5 年前

我正在尝试更改 span 有一个字体真棒图标直接从CSS页面,但似乎不能使它正常工作。

1)我已从文件和 <head>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">

2)我的HTML如下所示:

<span class='myClass'>Movies</span>

3)现在假设我想直接从css页面用一个图标来更改span的内容。

我的css目前看起来是这样,但它不起作用,它给了我一个正方形而不是图标。

.myClass {
  visibility: hidden;
}

.myClass::after {
  font-family: 'Font Awesome 5 Free';
  content: '\f008';
  visibility: visible;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css">
<span class='myClass'>Movies</span>

有趣的是,它看起来像是与一些图标一起工作。如果我用 content: '\f007'; 它工作。知道为什么吗?

(如果您想知道为什么我想在CSS中直接更改图标,那是因为我正在使用媒体查询,所以我不能直接在HTML页面中添加它)

0 回复 | 直到 5 年前

Temani Afif 5 年前

^{如果您使用的是js+svg版本,请阅读以下内容:

Font Awesome 5 replacement on <li> tag shows empty square}

您需要指定 font-weight:900 (或任何大于 600 , bold 或 bolder )为了这个。

.myClass {
  visibility: hidden;
}

.myClass::after {
  font-family: 'Font Awesome 5 Free';
  content: "\f008";
  visibility: visible;
  font-weight: 900;
}

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

这个 regular 默认情况下定义的图标版本 font-weight ,是专业的,因此它将显示一个空方块。你需要的是 solid 版本:

https://fontawesome.com/icons/film?style=solid

为什么另一个图标在工作?

因为 \f007 这个图标是: https://fontawesome.com/icons/user?style=regular 正如你所看到的, 有规律的 一个不专业,包含在免费软件包中,因此您不需要指定 字体加粗 . 您只需要在要显示 固体 版本。

.myClass::after {
  font-family: 'Font Awesome 5 Free';
  content: "\f007";
  visibility: visible;
  font-weight: 900;
}

.myClass-1::after {
  font-family: 'Font Awesome 5 Free';
  content: "\f007";
  visibility: visible;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<span class='myClass'>Solid </span>
<br>
<span class='myClass-1'>Regular </span>

作为旁注,所有的 light 版本是专业的所以没有 字体加粗 在免费的包裹里。

您可以查看文档以获取更多细节: https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements