时间戳

首页 > 解决方案 > 带有内联字体 css 的 FontAwesome 5 Unicode 支持

css - 带有内联字体 css 的 FontAwesome 5 Unicode 支持

问题描述

我使用的库不支持 font-weight 属性，而是 fontstyle 由 font css 属性定义，如此处所述

所以我测试了 FontAwesome 5，通过字体 css 属性设置字体样式，但它不起作用。我做错了什么还是 FontAwesome 5 不支持这种定义字体样式的模式？

.calendar::before {
  font-family: "Font Awesome 5 Free";  /* updated font-family */
  font-weight: 400; /* regular style/weight */
  content: "\f133";
}

.calendar2::before {
  font: "400 Font Awesome 5 Free";  /* updated font-family */
  content: "\f133";
}
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet"/>
<div class="calendar"></div>

<div class="calendar2"></div>

标签： cssfont-awesome-5

解决方案

我看到两个错误：

  • font有 2 个强制性属性：大小和家庭。您只指定了家庭。
  • 双引号内的文本是单个值，因此包含400使其成为值的一部分，因此不是先前的值。

尝试这样的事情：

.calendar::before {
  font-family: "Font Awesome 5 Free";  /* updated font-family */
  font-weight: 400; /* regular style/weight */
  content: "\f133";
}

.calendar2::before {
  font: 400 1em "Font Awesome 5 Free";  /* updated font-family */
  content: "\f133";
}
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet"/>
<div class="calendar"></div>

<div class="calendar2"></div>

推荐阅读