New Icon not working

Hi.

I have a problem. I used icons on my main sidebar as in the screenshot:

As you can see… all the icons appear to be good except for the last one. It is actually the same code that I used previously, but for some reason it appears with the word style.

The code used was: <i class="x-icon x-icon-dollar-sign" aria-hidden="true" data-x-icon="&#xf155;" style="padding-right:5px"></i>Kosten

I copied the same code and replaced the corresponding items, but for some reason, there’s an error. Here is the one I am using now: <i class="x-icon x-icon-briefcase” aria-hidden="true" data-x-icon="&#xf0b1;” style="padding-right:5px"></i>Arbeiten an der Schule

So, is there some solution to this problem?

Thanks in advance,

Hey @jgarciah,

In Pro 2.2, X 6.2, Cornerstone 3.2, we updated FontAwesome with this release. Version 5 required changes to the markup, CSS, and the file location changed. Your site is probably serving the old markup which has references to the previous font location. Clearing the cache including browser and CDN caches should fix the old reference problem.

For the markup, this could happen if your site has icon markup that you added directly rather than using our icon shortcode like in your case. As of Font Awesome version 5 they split icons into multiple fonts. This can be fixed by changing instances of the data-x-icon attribute to one of the following:

  • data-x-icon-b for social icons.
  • data-x-icon-o for outline icons.
  • data-x-icon-s for solid icons
  • data-x-icon-l for light icons

The original attribute data-x-icon will still work for solid icons as a fallback but we’ve updated everything for consistency.

Hope that helps.

Hi…
Now I have this code instead, <i class="x-icon x-icon-briefcase” aria-hidden="true" data-x-icon-s="” style="padding-right:5px"></i>Trabajar en el CAQ, but it still doesn’t work.

Should I change something else? The Installed Version of the X Theme is 6.2.5.

I hope I can solve this problem soon given that I am about to give the project to a client.

Regards,x

Hi again,

I see you’ve pretty quotes in your HTML markup, please replace your code with this:

<i class="x-icon x-icon-briefcase" aria-hidden="true" data-x-icon-s="" style="padding-right:5px"></i>Trabajar en el CAQ

Let us know how this goes!

Thank you very much Nabeel. That was of a great help. And since we are on the topic, how could I make these icons bigger?

Thanks in advance,

Hi,

To make it bigger, you can add font-size in your icon’s inline style.

eg.

<i style="padding-right:5px;font-size:15px;" class="x-icon x-icon-briefcase" aria-hidden="true" data-x-icon-s="" ></i>Trabajar en el CAQ

You may change 15px to adjust.

Thanks

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.