Getting error loading font awesome 5 in WP site

Question

I have used font awesome 5 on my website! It was working fine when I have used it on html but when I tried to use this on CSS using pseudo it was not working properly! The icon was not loading

.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'
);

I have tried font awesome 4 it worked but not sure why version 5 is not working! Any kind of help would be very appreciatable!

Check this answer https://stackoverflow.com/questions/47712987/font-awesome-5-on-pseudo-elements — brynzovskii, Oct 04 '19 at 07:29
Thanks I have tried this but it was working for brand icons only — nazifa rashid, Oct 04 '19 at 08:07

score 1 · Answer 1 · answered Oct 04 '19 at 07:10

1

You can use this code

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

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

answered Oct 04 '19 at 07:10

Piyush Teraiya

739
4
7

Other types: Font Awesome 5 Solid or Regular or Light or Brands – Piyush Teraiya Oct 04 '19 at 07:11
I have tried this for solids but it is not working, unfortunately! https://www.screencast.com/t/05Xouj8WXRo – nazifa rashid Oct 04 '19 at 08:07
I think it will work without script! Only you have to add font-weight in css for regular icons – nazifa rashid Oct 04 '19 at 08:51

brynzovskii · Accepted Answer · 2019-10-04T08:46:29.863

Can you try to add font-weight: 900; to your pseudo element. Docs says that Free Plan uses only Bold icons, it could be the issue.

\f04b looks like the one from Solid set of icons, so it uses only 900 "Bold" weight using Free Plan.

400 "Regular" is possible to use with Brand set of icons using Free Plan.

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

Getting error loading font awesome 5 in WP site

2 Answers2