Font Awesome - problems with icons after latest update 2.2.5

Support
#1

Since the last two release updates I have lost the icons I was previously using. I’ve followed other threads with this issue, emptied all caching plugins and CDN, but the problems still persists.

I only have the Font Awesome 5.0 icons available which doesn’t include what I was using before. Is there anyway I can continue to use previous icons and avoid having to use the 5.0 icons? I was using a thin weight previously and now have a heavier weight replacing it and spoiling the layout. I was just expecting to have an additional set of fonts integrated, rather than replacing what I was already using - or have I misunderstood the changenotes?

Thanks

#2

Hi @myoshka,

Thanks for reaching out.

Unfortunately, you can’t switch them to older version of font-awesome. But, would you mind providing more details of which page has this icon? I only see the cart icon which seems to be okay and the same from my older installation. For the meantime, please add this CSS to your gobal custom CSS.

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

Thanks!

#3

Thanks for the reply.

It’s affecting my accordion drop down icons and also the scroll to top navigation element.
If you scroll to bottom of these two pages you will see the elements I’m referring to.

Added the CSS to my global CSS but hasn’t changed icons on all the pages. For some reason it appears okay on the project link but not on the individual pages. I’ve been emptying cache.

#4

Hello @myoshka,

Thanks for updating the thread. :slight_smile:

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.

#5

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?

#6

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!

#7

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…

#8

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.

#9

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

1 Like
#10

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:

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.

#12

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

#13

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

#14

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>
#15

Hello There,

You must provide the full path of the style.

Please see the secure note.

#16

Hi
The secure note you added is blank.
Thanks

#17

Hi,

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

Thanks

#18

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.

#19

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

#20

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!

#21

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.