Css 字体5,为什么不';t品牌图标在使用字体时是否有效?

Css 字体5,为什么不';t品牌图标在使用字体时是否有效?,css,font-awesome,font-awesome-5,Css,Font Awesome,Font Awesome 5,想象一下,我只能通过CSS进行控制。HTML是自动生成的,所以我不能添加JS或更改HTML /*! *Font Awesome免费5.13.0作者@fontawesome-https://fontawesome.com *许可证-https://fontawesome.com/license/free (图标:CC BY 4.0,字体:SIL OFL 1.1,代码:MIT许可证) */ @字体{ 字体系列:“我的字体太棒了”; 字体风格:普通; 字号:900; 字体显示:自动; src:url

想象一下,我只能通过CSS进行控制。HTML是自动生成的,所以我不能添加JS或更改HTML

/*!
*Font Awesome免费5.13.0作者@fontawesome-https://fontawesome.com
*许可证-https://fontawesome.com/license/free (图标:CC BY 4.0,字体:SIL OFL 1.1,代码:MIT许可证)
*/
@字体{
字体系列:“我的字体太棒了”;
字体风格:普通;
字号:900;
字体显示:自动;
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)格式('embedded-opentype'),url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-solid-900.woff2)格式('woff2'),url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-solid-900.woff)格式('woff'),url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-solid-900.ttf)格式('truetype'),url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-solid-900.svg#fontawesome)格式(“svg”);
}
#苹果:之前,
#btn_检查:之前,
#btn_facebook:之前,
#补充:之前{
字体系列:“我的字体太棒了”;
保证金权利:.6rem;
左边距:1 em;
}
#苹果:在{content:'\f179'}之前
#btn_检查:{content:'\f00c'}之前
#btn_facebook:在{content:'\f082'}之前
#btn_plus:before{content:'\f067'}
苹果公司 检查 脸谱网
另外您需要为品牌图标生成新字体,因为它们与实体图标不属于同一组。然后您可以简单地同时使用这两种字体,浏览器将选择所需的字体:

/*!
*Font Awesome免费5.13.0作者@fontawesome-https://fontawesome.com
*许可证-https://fontawesome.com/license/free (图标:CC BY 4.0,字体:SIL OFL 1.1,代码:MIT许可证)
*/
@字体{
字体系列:“我的字体太棒了”;
字体风格:普通;
字号:900;
字体显示:自动;
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)格式('embedded-opentype'),url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-solid-900.woff2)格式('woff2'),url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-solid-900.woff)格式('woff'),url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-solid-900.ttf)格式('truetype'),url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-solid-900.svg#fontawesome)格式(“svg”);
}
@字体{
字体系列:“我的字体真是太棒了!”;
字体风格:普通;
字体大小:400;
字体显示:自动;
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)格式('embedded-opentype'),url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-brands-400.woff2)格式('woff2'),url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-brands-400.woff)格式('woff'),url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-brands-400.ttf)格式('truetype'),url(https://use.fontawesome.com/releases/v5.13.0/webfonts/ffa-brands-400.svg#fontawesome)格式(“svg”);
}
#苹果:之前,
#btn_检查:之前,
#btn_facebook:之前,
#补充:之前{
字体系列:“我的字体很棒”,“我的字体很棒”;
保证金权利:.6rem;
左边距:1 em;
}
#苹果:在{content:'\f179'}之前
#btn_检查:{content:'\f00c'}之前
#btn_facebook:在{content:'\f082'}之前
#btn_plus:before{content:'\f067'}
苹果公司 检查 脸谱网
另外品牌不是普通字体系列的一部分。您还需要包括品牌字体。