时间戳

首页 > 解决方案 > 在 WP 网站中加载字体真棒 5 时出错

css - 在 WP 网站中加载字体真棒 5 时出错

问题描述

我在我的网站上使用了 font 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 不能工作！任何形式的帮助都会非常感激！

标签： csswordpresssassfont-awesomepseudo-element

解决方案

您可以使用此代码

<script>
  window.FontAwesomeConfig = {
    searchPseudoElements: true
  }
</script>
.class:before{
  display: none;
  content: "\f16c";
  font-family: "Font Awesome 5 Brands";
}

推荐阅读