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

Question

我在我的网站上使用了字体 awesome 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'
);

我已经尝试过 font awesome 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 set of icons 中的那个，所以使用免费计划它只使用 900 "Bold" 权重。

400 "Regular" 可以使用免费计划与品牌图标集一起使用。

.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>

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

Getting error loading font awesome 5 in WP site

css

wordpress

sass

pseudo-element

font-awesome