Question

在我的package.json中，我有

 "dependencies": {
    "font-awesome": "^4.7.0"
  }

我的html中有

<link rel="stylesheet" type="text/css" href="../node_modules/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

如果我注释掉第二个链接，那么我的超棒字体图标都不会显示，而我只会得到空矩形。

在我的CSS中，我有

fas fa-circle

有人看到我在做什么错吗？

Answer 1

这适用于版本5及更高版本

在您的HTML中

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

然后，使用此代码

<span><i class="fas fa-circle"></i></span> // for Solid
<span><i class="far fa-circle"></i></span> // for Regular

而且，这是针对4.7.0版的

在您的HTML中，

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

然后

<span><i class="fa fa-circle-thin" aria-hidden="true"></i></span>
<span><i class="fa fa-circle" aria-hidden="true"></i></span>
<span><i class="fa fa-circle-o" aria-hidden="true"></i></span>

Answer 2

对于本地安装的4.7.0版本，我应该使用fa而不是fas。

    <link rel="stylesheet" type="text/css" href="../node_modules/font-awesome/css/font-awesome.css">

包装是

    "font-awesome": "^4.7.0"

字体很棒的圈子没有出现

2 个答案: