Font Awesome 5，为什么使用 font-face 时品牌图标不起作用？

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，为什么使用 font-face 时品牌图标不起作用？

Font Awesome 5, why don't brand icons work when using font-face?

css

font-awesome

font-awesome-5