Font Awesome - problems with icons after latest update 2.2.5

[Prasant]

Hello @myoshka,

Thanks for updating the thread.

On my end the URL’s you have shared in the latest reply, icons seems to be showing up fine. I have recorded a screencast, please take a look. Please clear browser cache and then try again.

Thanks.

[myoshka]

Apologies If I wasn’t clear enough previously. The icons are previewing at the correct weight on the first link but not the second. I have emptied all caches, browser and CDN. It doesn’t make a difference. I also note that I have the heavy icons on mobile across all pages.

I’ve attached screenshots of what I mean, the CSS doesn’t appear to be affecting the second link.
FYI: Link 1 is a portfolio item, Link 2 is a page. Could this be the problem?

[friech]

Hi Myoshka,

I did take a look on this, and just to clarify that this is not an issue with the theme. As you can see here the FontAwesome 5 only provides the Solid (thickest) version as Free, the Regular and Light version are part of the FontAwesome 5 PRO which requires a license from FontAwesome to used.

The reason why you still get the regular icons here, is because of the Revolution Slider is still providing you the FontAwesome 4.7, since you do have multiple Sliders on each of those pages, I can’t investigate why rev slider is loading the FontAwesome 4.7 on that page, but not on the other. I’m sure it is coming from Revolution Slider (see the screenshot below).

If you really still want to load the FontAwesome 4.7 to all your pages. You can use the CSS link provided by BootstrapCDN here.

Then import that to your child theme’s style.css file using the CSS @import Rule. (Just be mindful that you have this on your child theme, as this might create a conflict in the future.)

Hope this shed some lights,
Cheers!

[myoshka]

Hi,

Thanks for explaining… I didn’t realise it was an issue with license for the font - it was all free and working in previous versions. Also, I would expect a prompt to pay when there’s an upgrade - the missing weights looked more like an error when I updated to 2.2.5.

I’ve added the Pro license and added the url to CDN option for font management. Is this the best way for me to do this? The Self-hosted option was a lot more complicated than I was expecting.

I’m not seeing any changes as yet on the previous LINK 2 (the documentation said would take around 5 min to start working).do I need to remove the CSS I added previously? I’ve flushed my Cache.

[data-x-icon-o], [data-x-icon-s], [data-x-icon-b], [data-x-icon], [class*=“x-icon-”] {
font-weight: 400 !important;
}

Appreciate your assistance…

[paul.r]

Hi,

I am not sure how you have added Fontawesome 4.7 to your site.

As my colleague have suggested, you need to add it using @import

Please add the code below in Appearance > Customize > Additional CSS

@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

Hope this helps.

[myoshka]

@myoshka

I’ve added the Pro license and added the url to CDN option for font management. Is this the best way for me to do this? The Self-hosted option was a lot more complicated than I was expecting.

I’m not seeing any changes as yet on the previous LINK 2 (the documentation said would take around 5 min to start working).do I need to remove the CSS I added previously? I’ve flushed my Cache.

[data-x-icon-o], [data-x-icon-s], [data-x-icon-b], [data-x-icon], [class*=“x-icon-”] {
font-weight: 400 !important;
}

I’ve just spent $60 dollars following the instructions so I can use all the weights available.

I’m not trying to add 4.7 as I was told this was a license issue - just need to get 5.0 Pro up and running.

Thanks

[Alaa]

Hi @myoshka

Unfortunaltey, we don’t have an official way currently to include Font Awesome Pro font in the theme, however, depending on the way you implemented the Pro version in your site, we might be able to find a way to load those icons on your site, but first please provide more details regarding how you implemented these fonts? what do you mean exactly by:

@myoshka

I’ve added the Pro license and added the url to CDN option for font management. Is this the best way for me to do this? The Self-hosted option was a lot more complicated than I was expecting.

Also, you will need to provide us with both WordPress Dashboard and FTP login details in a Secure Note reply so we can our trials.

Thanks.

[myoshka]

The login details were included when I originally posted.
I’ve included them again for you.

There is a CDN option for loading in the font to websites when I purchased the pro version. It’s in Beta so maybe not the best solution.

I would like to know the recommended way to implement the font now I have purchased.

If you can give me some guidance that would be great - I have all the downloaded web files ready.

Thanks

[Alaa]

@myoshka that’s great, please upload them in a directory inside your child theme directory via FTP, so we can proceed with our trials.

Thanks.

[myoshka]

Hi - I’ve uploaded the font to the link supplied.

I also downloaded and installed Insert Headers and Footers plugin as I need this for Google Analytics and noted it’s also used to load fonts on pages.

Was unsure if I needed full path or as appears below but have taken this from font awesome install page,

<head>
  <link href="/fonts/css/all.css" rel="stylesheet"> <!--load all styles -->
</head>
<body>
  <i class="fas fa-user"></i> <!-- uses solid style -->
  <i class="far fa-user"></i> <!-- uses regular style -->
  <i class="fal fa-user"></i> <!-- uses light style -->
  <!--brand icon-->
  <i class="fab fa-github-square"></i> <!-- uses brands style -->
</body>

[ruenel]

Hello There,

You must provide the full path of the style.

Please see the secure note.

[myoshka]

Hi
The secure note you added is blank.
Thanks

[paul.r]

Hi,

To add the pro version to your site you can add the code below in Appearnace > Customzie > Additional CSS

Thanks

[myoshka]

Thanks I see the test is working on the test page.
I also see the added CSS in ADDITIONAL CSS.

However, this still hasn’t fixed any of the previous problems with font weights.

At the beginning of the thread I was told to add to Global CSS.

[data-x-icon-o], [data-x-icon-s], [data-x-icon-b], [data-x-icon], [class*=“x-icon-”] {
font-weight: 400 !important;
}

This only affected portfolio pages. Other pages, including the home page, I am unable to control weights of icons.

Please see secure note for details.

[myoshka]

Just to confirm. Changes have only worked on Link1 - every other page since the update, my icons are previewing at 900 weight.

[rad]

Hi @myoshka,

That inclusion of your own version of font awesome doesn’t override the font-awesome within the theme. Which means you still have to manually override all icons instances. Our theme uses the custom class like x-icon and not fa-icon, hence, still requires customization. I’ll add this to our issue tracker.

I also tried changing the weight and it doesn’t change, it looks like it’s part of the font awesome.

Thanks!

[myoshka]

Can you explain how I manually override all icons instances.
I’ve already added the CSS but it only works on 1 page on the entire website. I’m unclear on the next steps you are suggesting.

[data-x-icon-o], [data-x-icon-s], [data-x-icon-b], [data-x-icon], [class*=“x-icon-”] {
font-weight: 400 !important;
}

when I inspect elements that appear in the wrong weight I still see the above CSS in the inspector - it is just not having any affect.

I also tried changing the weight and it doesn’t change, it looks like it’s part of the font awesome.

Can you explain what you mean by this.

I just licensed Font Awesome 5.0 pro because I was advised by support on this thread it would fix the weight issues. They never mentioned about manually updating anything afterwards.

[myoshka]

@friech

If you really still want to load the FontAwesome 4.7 to all your pages. You can use the CSS link provided by BootstrapCDN here.

@friech The above solution was the only way I could get the icons to work and be consistent across all pages.

I’ve got it looking how I liked it previously, but I paid $60 dollars following your advice for Awesome 5.0 and since then, no one has been able to get it to work across all pages in the desired weight! Let me know if you have any ideas why this would have happened. I had other pages with RevSlider and Awesome was loading, but weights weren’t working, for that reason I’m not convinced it was the slider causing the problem.

Bare in mind if you look at the site I have now loaded Awesome 4.7 replacing the Awful 5.0.
Those fat infantile icons had to go!

I’ll be asking for a refund for the font, unless you can figure it out.
Cheers

[Alaa]

Hi @myoshka

Unfortunately, there is no way you can just include a single line of code to call the font awesome pro version that will fix all the icons problems you have on your site.

If you want to load any icon from Font Awesome Pro, you will need to load the font on your website following the method described by @paul.r then write custom CSS/HTML codes to use the new icon, there is no option integrates this into the theme in the current version, however, we have that in one of the feature requests tickets, but I’m not sure at the moment about the possibility of having this feature implemented in one of the upcoming releases.

Thanks.