Font Awesome 5，为什么在使用字体时品牌图标不起作用? [英] Font Awesome 5, why don't brand icons work when using font-face?

问题描述

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

Imagine that I only have control through CSS. HTML is generated automatically, so I cannot add JS or change the 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/

推荐答案

您需要为品牌图标生成新字体，因为它们与实体图标不属于同一组.然后，您可以简单地将两种字体一起使用，浏览器将选择所需的字体:

You need to generate a new font for the brand icons because they don't belong to the same group as the solid one. Then you can simply use both font together and the browser will pick the needed one:

/*!
 * 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

More details from the Documentation: https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself#using-certain-styles

相关问题:字体很棒5在伪元素中选择正确的字体系列

这篇关于Font Awesome 5，为什么在使用字体时品牌图标不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！