Font Awesome 5，为什么品牌图标不能使用字体显示？

Question

想象我只能通过CSS进行控制。 HTML是自动生成的，因此我无法添加JS或更改HTML。

/*!
 * Font Awesome Free 5.13.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons:CC BY 4.0, Fonts:SIL OFL 1.1, Code:MIT License)
 */

@font-face {
    font-family: 'my_font_awesome';
    font-style: normal;
    font-weight: 900;
    font-display: auto;
    src: url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-solid-900.eot);
    src: url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-solid-900.eot?#iefix) format('embedded-opentype'), url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-solid-900.woff2) format('woff2'), url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-solid-900.woff) format('woff'), url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-solid-900.ttf) format('truetype'), url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-solid-900.svg#fontawesome) format('svg');
}

#btn_apple:before,
#btn_check:before,
#btn_facebook:before,
#btn_plus:before {
  font-family: 'my_font_awesome';
  margin-right: .6rem;
  margin-left: 1rem;
}

#btn_apple:before {content:'\f179'}
#btn_check:before {content:'\f00c'}
#btn_facebook:before {content:'\f082'}
#btn_plus:before {content:'\f067'}

<a id="btn_apple">Apple</a>
<a id="btn_check">Check</a>
<a id="btn_facebook">Facebook</a>
<a id="btn_plus">Plus</a>

https://jsfiddle.net/johnlasantos/o1thrzxv/12/

Answer 1

您需要为品牌图标生成新字体，因为它们与实体图标不属于同一组。然后，您只需将两种字体一起使用，浏览器就会选择所需的字体：

/*!
 * Font Awesome Free 5.13.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons:CC BY 4.0, Fonts:SIL OFL 1.1, Code:MIT License)
 */

@font-face {
    font-family: 'my_font_awesome';
    font-style: normal;
    font-weight: 900;
    font-display: auto;
    src: url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-solid-900.eot);
    src: url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-solid-900.eot?#iefix) format('embedded-opentype'), url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-solid-900.woff2) format('woff2'), url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-solid-900.woff) format('woff'), url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-solid-900.ttf) format('truetype'), url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-solid-900.svg#fontawesome) format('svg');
}

@font-face {
    font-family: 'my_font_awesome_b';
    font-style: normal;
    font-weight: 400;
    font-display: auto;
    src: url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-brands-400.eot);
    src: url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-brands-400.eot?#iefix) format('embedded-opentype'), url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-brands-400.woff2) format('woff2'), url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-brands-400.woff) format('woff'), url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-brands-400.ttf) format('truetype'), url(https://use.fontawesome.com/releases/v5.13.0/webfonts/ffa-brands-400.svg#fontawesome) format('svg');
}

#btn_apple:before,
#btn_check:before,
#btn_facebook:before,
#btn_plus:before {
  font-family: 'my_font_awesome','my_font_awesome_b';
  margin-right: .6rem;
  margin-left: 1rem;
}

#btn_apple:before {content:'\f179'}
#btn_check:before {content:'\f00c'}
#btn_facebook:before {content:'\f082'}
#btn_plus:before {content:'\f067'}

<a id="btn_apple">Apple</a>
<a id="btn_check">Check</a>
<a id="btn_facebook">Facebook</a>
<a id="btn_plus">Plus</a>

来自文档的更多详细信息：https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself#using-certain-styles

相关问题：Font Awesome 5 Choosing the correct font-family in pseudo-elements