font-awesome - 伪元素上的 Font Awesome 5

Question

在 font Awesome 4 中，您可以使用 CSS 轻松地将图标应用到 :before/:after 元素。

新的 font Awesome 5 JS/SVG 实现是否可以实现同样的效果？据我所知，这需要相关标签存在于 html 中，但这并不总是实用的，例如您有一个 CMS 并希望将图标应用于所有用户创建的内容 <li>元素

我知道在 FA5 中您仍然可以使用旧的 css/webfonts，但如果在使用 JS 的推荐方法中提供相同的功能，那就太好了

Answer 1

指定正确的字体粗细似乎是正确显示某些符号的关键(而不是“□□□”)。

字体粗细必须是:

• 400 适用于常规 和品牌 符号
• 900 用于实心符号
• 300 表示 Light 符号

即如果您将 Font-Awesome 与 CSS + Webfonts 一起使用，则仅 CSS 的解决方案是:

@import url("font-awesome/css/fontawesome-all.min.css"); /* FA CSS import */

/* ... */

.class:before {
    /* >> Symbol you want to use: */
    content: "\f16c";
    /* >> Name of the FA free font (mandatory), e.g.:
               - 'Font Awesome 5 Free' for Regular and Solid symbols;
               - 'Font Awesome 5 Pro' for Regular and Solid symbols (Professional License);
               - 'Font Awesome 5 Brand' for Brands symbols. */
    font-family: 'Font Awesome 5 Free';
    /* >> Weight of the font (mandatory):
               - 400 for Regular and Brands symbols;
               - 900 for Solid symbols;
               - 300 for Light symbols. */
    font-weight: 900;

    /* >> Optional styling: */
    display: inline-block;
    /* ... */
}