Changing icons to Font Awesome Pro Version

Is there any tutorial of how to switch my discourse icons to the pro version from Font Awesome?

7 Likes

Good idea, we should at least mention this somewhere @pmusaraj. Probably simple? I guess here in this topic is good!

7 Likes

If the Pro package includes one SVG sprite file, you can add that file in a theme or a theme component, and reference it as an asset with the variable icons-sprite:

"assets": {
   "icons-sprite": "/assets/my-icons.svg"
}

If there are multiple sprite files in Pro, you might want to add them to a plugin.

Add each SVG sprite file in the plugins/your-plugin-name/svg-icons folder and then restart your server (if in dev) or rebuild the site.

4 Likes

Access to the Pro packages, which contain more icons and styles, require you to configure the @fortawesome scope to use our Pro NPM registry. (Font Awesome)

I’m trying to install the pro version but I’m having no sucess at this. Do you have any tip?

59873340_2274600549301497_2045154540344311808_n

You should do these npm steps somewhere else, at /var/discourse is not a good place for them. Also, I’m not sure how the Pro package is shipped, but you only need the svg sprites in Discourse. The free ones are here: https://github.com/FortAwesome/Font-Awesome/tree/master/sprites

2 Likes

You’ll probably need to do that inside the container. You’d first do it with

./launcher enter app

and muck with it there, and then you’d edit app.yml to have it do that stuff when it built the container.

Or, you’d do that stuff elsewhere and get the svg file that you need and put it . . . somewhere.

And you probably don’t want to download all zillion of the things anyway.

1 Like

Very much this, the move to FontAwesome 5 coincided with a change to selectively load what was needed and reduced the amount of data sent to the browser by 63%. Blindly loading everything in FA5 Pro would push the needle well in the opposite direction.

5 Likes

Actually I’m trying to change my icons to a more light style, not regular or solid. To use this style I need to be PRO on FontAwesome.

Example from a Discourse forum:

Or maybe those are custom icons.

I think it will be more cost-effective to use custom icons - there are loads of quality icon sites (or even sets) that don’t cost as much as FA pro.

4 Likes

Hey @Merlls_Rizzini - If you’re still looking for this, I just released a plugin that allows a site to install all the pro icons, which should make this process a little easier.

There’s still a little work to do as you still need to figure out which icons you want to swap, and write a theme component to use the new icons (see the section about replacing the default icons from this howto for details - currently there’s still no way to replace all the icons with a different style (eg, replacing solid for light), but it hopefully makes it easier to do customizations like this.

10 Likes