没有此代码，Fontawesome 将无法工作

Question

每次我想使用 fontawesome 时，我都必须将这种样式添加到页面中：

<style>
* {
    font-family: fontawesome !important;
}
</style>

如果不是它只是显示一个空白方块，但这样做我不能使用其他字体，任何解决方案我可以使用 fontawesone 但不必定义它？

Answer 1

此解决方案是关于 Font Awesome 5 的。有两种方法可以应用 Font Awesome 图标。在下面的代码片段中，我展示了它们。你需要link font awesome new library，否则无法运行。

.fa {
  font-family: "Font Awesome 5 Free";  /* updated font-family */
  font-weight: 900; /* regular style/weight */
}

.my-camera::before {
  font-family: "Font Awesome 5 Free";  /* updated font-family */
  font-weight: 900; /* regular style/weight */
  content: "\f083";
  font-style:normal;
}

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




<i class="fas fa-camera-retro"></i> <!-- version 5's syntax -->

<br>

<i class="my-camera"></i> <!-- version 5's syntax -->

https://jsfiddle.net/Sampath_Madhuranga/sjn5Lek2/5/

Answer 2

.fa, .far, .fas {
    font-family: "Font Awesome 5 Free";
}

试试这个，他们已经更改了字体系列名称。

没有此代码，Fontawesome 将无法工作

Fontawesome doesn't work without this code

html

css

font-awesome-5