在伪元素before/after中使用字体图标font awesome 5

猫斯基  — font awesome


font awesome 4.x的版本中,我们用以下代码来在a标签的after伪元素中使用。

.maosiji_com a:after {
    font-family: "Font Awesome";
    content: "\f107";
    color: #aaa;
    font-size: 13px;
    margin-left: 5px;
}

如果在font awesome 5中,像以下代码这样写就不起作用了。

.maosiji_com a:after {
    font-family: "Font Awesome 5 Free";
    content: "\f107";
    color: #aaa;
    font-size: 13px;
    margin-left: 5px;
}

这是因为在Font Awesome 5css中有多个font-familyFont Awesome 5 Free的类。

.far {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400; }
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  font-display: auto;
  src: url("../webfonts/fa-solid-900.eot");
  src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.woff") format("woff"), url("../webfonts/fa-solid-900.ttf") format("truetype"), url("../webfonts/fa-solid-900.svg#fontawesome") format("svg"); }

.fa,
.fas {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900; }

所以我们必须在代码中加入font-weight: 900;font-weight: 400;来区分调用的是哪个。

正确的代码如下:

.maosiji_com a:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f107";
    color: #aaa;
    font-size: 13px;
    margin-left: 5px;
}

阅读量:0 2021-03-27 13:34

返回顶部