Font Awesome在CSS中直接使用时显示正方形而不是图标

I am trying to change the content of a span with a Font Awesome icon directly from the CSS page but can't seem to make it work properly.

我试图直接从CSS页面用Font Awesome图标更改跨度的内容,但似乎无法使其正常工作。

1) I have imported FA from the documentation and in the <head>

1)我从文档和导入了FA

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

2) My html looks like this :

2)我的HTML看起来像这样:

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

3) Let's now say I would like to change the content of the span with an icon directly from the CSS Page.

3)现在让我说我想直接从CSS页面用图标更改跨度的内容。

My css currently looks like this but it isn't working, it gives me a square instead of the icon.

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

Funny thing is that it looks like it is working with some icons. If I test with content: '\f007'; it works. Any idea why?

有趣的是,它看起来像是在使用一些图标。如果我测试内容:'\ f007';有用。知道为什么吗?

(And if you wonder why I want to change the icon directly in the CSS, it is because I am using media queries so I can't add it directly in the HTML page)

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

1 个解决方案

#1

You need to specify font-weight:900 (or any value bigger than 600, bold or bolder) for this one.

您需要为此指定font-weight:900(或任何大于600,粗体或粗体的值)。

.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.2.0/css/all.css">
<span class='myClass'>Movies</span>

The regular version of the icon, defined by the default font-weight, is PRO so it will show an empty square. What you need is the solid version:

由默认字体权重定义的图标的常规版本是PRO,因此它将显示空方块。你需要的是固体版本:

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

Why the other icon is working?

为什么其他图标有效?

Because the \f007 is this icon : https://fontawesome.com/icons/user?style=regular and as you can see, the regular one is not PRO and is included in the free package so you don't need to specify a font-weight. You only need to specify it when you want to show the solid version.

因为\ f007是这个图标:https://fontawesome.com/icons/user?style = regular,如您所见,常规版本不是PRO并且包含在免费软件包中,因此您无需指定字体粗细。您只需要在显示实体版本时指定它。

.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.2.0/css/all.css">
<span class='myClass'>Solid </span>
<br>
<span class='myClass-1'>Regular </span>

As a side note, all the light version are PRO so there is no font-weight for them in the free package.

作为旁注,所有的轻型版本都是PRO,因此免费包装中没有字体重量。

You can check the documentation for more details : https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

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

#1