在 WP 站点中加载字体真棒 5 时出错

Question

我在我的网站上使用了字体真棒5！当我在 html 上使用它时，它工作正常，但是当我尝试使用伪在 CSS 上使用它时，它无法正常工作！图标未加载

.ex-loadmore .loadmore-exbt {
border: none;
color: $cerulean;
font-family: $secondary-font;
font-size: 14px;
line-height: 48px;
text-align: center;
color: #3A7DC0;
padding: 0 30px !important;
&::after {
content: "f04b";
font-family: "Font Awesome 5 Free";
}
&:hover {
color: #fff !important;
background: #3A7DC0 !important;
padding: 0 30px !important;
}
}

function emailagency_assets() {
wp_enqueue_style(
$handle = 'google_fonts', 
$src = '//fonts.googleapis.com/css?family=Roboto&display=swap'
);
wp_enqueue_style(
$handle = 'fontAwesome', 
$src = '//use.fontawesome.com/releases/v5.2.0/css/all.css'
);
wp_enqueue_style(
$handle = 'bootstrap', 
$src = '//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'
);
if ( is_rtl() ) {
wp_enqueue_style( 'mfn-rtl', get_template_directory_uri() . '/rtl.css' );
}
// Enqueue the child stylesheet
wp_dequeue_style( 'style' );
wp_enqueue_style( 
$handle = 'style', 
$src = get_stylesheet_directory_uri() .'/dist/css/style.css' 
);
wp_enqueue_script( 
$handle = 'font_awesome_script',
$src = '//use.fontawesome.com/releases/v5.2.0/js/all.js'
);
wp_enqueue_script( 
$handle = 'boot1',
$src = '//code.jquery.com/jquery-1.12.4.min.js'
);
wp_enqueue_script( 
$handle = 'boot2',
$src = '//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js'
);
wp_enqueue_script( 
$handle = 'boot3',
$src = '//stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js'
);
}
add_action(
$tag = 'wp_enqueue_scripts', 
$function_to_add = 'emailagency_assets'
);

我已经尝试了字体真棒 4 它有效，但不确定为什么版本 5 不起作用！ 任何帮助都将非常感激！

Answer 1

您可以使用此代码

<script>
window.FontAwesomeConfig = {
searchPseudoElements: true
}
</script>

.class:before{
display: none;
content: "f16c";
font-family: "Font Awesome 5 Brands";
}

Answer 2

你能尝试font-weight: 900;添加到你的伪元素中吗？Docs说免费计划仅使用Bold图标，这可能是问题所在。

f04b看起来像 Solid 图标集中的那个，因此它使用免费计划仅使用 900 个"粗体"权重。

400"常规"可以使用免费计划的品牌图标集一起使用。

.custom-span {
display: block;
padding: 40px;
margin-top: 50px;
}
.custom-span:before {
content: "f04b";
font-weight: 900;
font-family: "Font Awesome 5 Free";
}

<link href="//use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet"/>
<span class="custom-span"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut consequatur, dignissimos eos esse magnam neque provident rem? Ea, maiores praesentium? Ad cum doloremque dolores, error illum non porro temporibus voluptas.</span>