Switching from FontAwesome to FontAwesome Pro

[Ryderz]

URL: troly.io
Product: X

Hi guys,

We have purchased a “pro” licence for FontAwesome which we’d like to use on our site. the primary need is for the icons to be “light” more than regular, eg

use https://fontawesome.com/icons/alarm-clock?style=light
not https://fontawesome.com/icons/alarm-clock?style=regular

I would also like to host this on a CDN (theirs or ours / cloudinary).

What is the best way of a) changing cornerstone and themex and load the correct fontaweome pro instead of the default one? (I don’t want to load both…!) and b) what is the best way to the right “weight” in cornerstone preview? ie I can include the link in the header or elsewhere, but is it as simple as this;
[data-x-icon] {
font-family: “FontAwesome”;
font-weight: light;
}

[Ryderz]

btw… ran a quick search through the forums and there seems to be more problems with fontawesome than “upgrade” questions…

Here’s complete access details (although, I’m very comfortable with making the changes myself…)

[paul.r]

Hi,

Regretfully this will require a lot of changes on the theme core files and this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

We have added this to our feature request list but I’m not sure at the moment about the possibility of having this feature implemented in one of the upcoming releases.

Thanks for understanding. Take care!

[Ryderz]

Thanks. Are you able to provide some assistance on changing only the front end (not icons within cornerstone)? Essentially, I just want theme x to load a different set of files and override the CSS to force this, right?

[paul.r]

Hi,

You may upload the fontawesome pro files to your child theme then add it to your site using @import

For example if you have uploaded it to wp-content/themes/x-child/font-awesome, you can add it by adding the code below in Appearance > Customize > Additional CSS

@import url(https://yoursite.com/wp-content/themes/pro-child/font-awesome/css/all.css);

You should then be able to use fontawesome icons code like

<i class="fas fa-address-book"></i>

For more information kindly refer to the link below

https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css
https://fontawesome.com/icons

Thanks

[Ryderz]

@paul.r

<i class=“fas fa-address-book”></i>

Paul, both themex and cornerstone elements do not produce html in the format;

I was able to force the correct font-weight as I originally suggested
[class*=“x-icon-”] {
font-family: “FontAwesome 5 Pro”;
font-weight: light;
}

Now for my last question; how do I make sure Fontawesome, the standard version, is NOT loaded by xtheme for the public facing pages?

Thanks,

[ruenel]

Hello There,

Since Font Awesome is bundled in the theme, it will always be loaded in the front end. You can just force it no to display by using your custom css. To a much better strict implementation, you can update your css into this:

.site [class*="x-icon-"] {
  font-family: "FontAwesome 5 Pro";
  font-weight: light;
}

Hope this helps.