Ошибка при загрузке шрифта awesome 5 на сайте WP - PullRequest
Новая
       31

Ошибка при загрузке шрифта awesome 5 на сайте WP

0 голосов
/ 04 октября 2019

Я использовал шрифт 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'
);

Я пробовал шрифт потрясающий 4, он работал, но не уверен, почему версия 5 не работает! Любая помощь будет очень благодарна!

Ответы [ 2 ]

1 голос
/ 04 октября 2019

Вы можете использовать этот код 

<script>
  window.FontAwesomeConfig = {
    searchPseudoElements: true
  }
</script>
.class:before{
  display: none;
  content: "\f16c";
  font-family: "Font Awesome 5 Brands";
}
0 голосов
/ 04 октября 2019

Можете ли вы попытаться добавить font-weight: 900; к вашему псевдоэлементу. Документы говорят, что Free Plan использует только иконки 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>
...