Use Font-Awesome 4 icons in theme but keep FA5?

[Chaboi_3000]

I want to use a certain FA4 icon in my theme, but still keep the FA5 icons, and I don’t want to downgrade to an older version. Is it possible to use a certain FA4 icon in a theme while keeping the others FA5?

[dax (Daniela)]

Not recommended, but you can use the CDN script to add again the FA 4.7 icons on your site.

Copy the script you will find in your email and paste it in the /head tab of your theme
<script src="https://use.fontawesome.com/xxxxxxxxxx.js"></script>

You need also to whitelist the source (https://use.fontawesome.com/xxxxxxxxxx.js) adding the URL in the site setting content security policy script src to make the script work.

Then you will be able to use the old set of icons on your site.

PS: Note that there is no guarantee that this workaround will continue to work in the future.

[Falco]

If you just want one icon from FA4, extract the SVG of said icon and add it as a custom icon following

Introducing Font Awesome 5 and SVG icons

Adding custom icons

If you would like to have more icons than what’s available in FontAwesome, you can add your own SVG icons in a plugin or a theme.

[Chaboi_3000]

Thanks, @Falco, and @dax, but how would I reference that uploaded SVG icon?
Currently, I’m trying to do this:

api.replaceIcon('shield-alt', '$old-icon);

But it leaves a blank space instead of loading the SVG icon. Am I doing something wrong?

[Chaboi_3000]

I also tried

api.replaceIcon('shield-alt', 'old-icon.svg');

but it also failed.

[Falco]

Can you share a the theme-component github repository where this is failing?

[Chaboi_3000]

@Falco, here it is:
https://github.com/Chaboi45/OldMod-Icon

[pmusaraj (Penar Musaraj)]

You need to follow the instructions Falco linked earlier more closely:

Introducing Font Awesome 5 and SVG icons

If you would like to have more icons than what’s available in FontAwesome, you can add your own SVG icons in a plugin or a theme.

In themes : add the SVG sprite in your theme’s /assets folder, and reference it in about.json using the variable name icons-sprite . For a sprite called my-icons.svg , your assets.json should include this:

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

In plugins : simply include an SVG sprite file in the plugins/your-plugin-name/svg-icons folder (see this example SVG sprite ). Restart your server (if in dev) or rebuild the site if in a Docker container and your custom icons should be automatically available .

In your repository, the svg file needs to be a sprite and the variable name in about.json shouldn’t be old, it should be icons-sprite. Then to replace the icon in JS, you need to use the id from the sprite in api.replaceIcon.

[Chaboi_3000]

Ah, sorry, can you restate what I did wrong now?

• I have an SVG file in the assets folder named old.svg
• I reference it in about.json like this: "icons-sprite": "/assets/old.svg"
• In common/head_tag.html, I have the following code:

<script type="text/discourse-plugin" version="0.8">
    api.replaceIcon('shield-alt', 'icons-sprite');
    
</script>

But something’s wrong with what I did. Sorry for the annoyance I caused you, but I kind of want to finish this quickly.

[cjk77 (Chris Klugewicz)]

I have an SVG file in the assets folder named old.svg

You can’t use a regular SVG file – it needs to be a sprite file.

[Chaboi_3000]

Ok, I created a png sprite file, but I do I use that in my theme for api.replaceIcon('shield-alt', 'icons-sprite') ?:

or just

For the second image, it’s name is icons-sprite.png, and I want to use that for api.replaceIcon. How would I use it?

[pmusaraj (Penar Musaraj)]

Let’s say your sprite file contents is this:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="super-icon1" viewBox="0 0 1792 1792">
    <path d="M896 960v448q0 26-19 45t-45 19-45-19l-144-144-332 332q-10 10-23 10t-23-10l-114-114q-10-10-10-23t10-23l332-332-144-144q-19-19-19-45t19-45 45-19h448q26 0 45 19t19 45zm755-672q0 13-10 23l-332 332 144 144q19 19 19 45t-19 45-45 19h-448q-26 0-45-19t-19-45v-448q0-26 19-45t45-19 45 19l144 144 332-332q10-10 23-10t23 10l114 114q10 10 10 23z"></path>
  </symbol>
  <symbol id="super-icon2" viewBox="0 0 1792 1792">
    <path d="M883 1056q0 13-10 23l-332 332 144 144q19 19 19 45t-19 45-45 19h-448q-26 0-45-19t-19-45v-448q0-26 19-45t45-19 45 19l144 144 332-332q10-10 23-10t23 10l114 114q10 10 10 23zm781-864v448q0 26-19 45t-45 19-45-19l-144-144-332 332q-10 10-23 10t-23-10l-114-114q-10-10-10-23t10-23l332-332-144-144q-19-19-19-45t19-45 45-19h448q26 0 45 19t19 45z"></path>
  </symbol>
</svg>

You need to have ids for each symbol, so that you can use those in JS, for example:

api.replaceIcon('shield-alt', 'super-icon1')

[Chaboi_3000]

@pmusaraj, thanks, but how do I convert a single SVG icon into a sprite file?
Current code:

<?xml version="1.0" encoding="utf-8"?>
<svg width="1792" id="oldm" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1344 960v-640h-448v1137q119-63 213-137 235-184 235-360zm192-768v768q0 86-33.5 170.5t-83 150-118 127.5-126.5 103-121 77.5-89.5 49.5-42.5 20q-12 6-26 6t-26-6q-16-7-42.5-20t-89.5-49.5-121-77.5-126.5-103-118-127.5-83-150-33.5-170.5v-768q0-26 19-45t45-19h1152q26 0 45 19t19 45z"/></svg>

[pmusaraj (Penar Musaraj)]

You could Google this and get a better answer, but you can try taking the <path> element and putting it inside of a symbol in the sprite.

[Chaboi_3000]

I converted mine to a sprite file, but GitHub says it’s invalid and all of the icons are broken now:

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id=”oldm” viewBox=”0 0 1792 1792”>
<path d=”M1344 960v-640h-448v1137q119-63 213-137 235-184 235-360zm192-768v768q0 86-33.5 170.5t-83 150-118 127.5-126.5 103-121 77.5-89.5 49.5-42.5 20q-12 6-26 6t-26-6q-16-7-42.5-20t-89.5-49.5-121-77.5-126.5-103-118-127.5-83-150-33.5-170.5v-768q0-26 19-45t45-19h1152q26 0 45 19t19 45z"></path>
</symbol>
</svg>

[pmusaraj (Penar Musaraj)]

You might need to declare the XML encoding at the top of the file. Copy the contents of https://raw.githubusercontent.com/discourse/discourse/master/vendor/assets/svg-icons/discourse-additional.svg from core, and replace the symbol tags in it with yours, and see if that works.

[Chaboi_3000]

@pmusaraj

rom core, and replace the symbol tags in it with yours, and see if that works.

I copied the same exact thing and GitHub declined it. So I tried a different technique using local CDN:
https://github.com/FortAwesome/Font-Awesome/wiki/Customize-Font-Awesome#with-localcdn-fontawesomealljs
But it seems like there’s an error with the FA library. Here’s my broken code:

<script type="text/discourse-plugin" version="0.8">
    // replace 1568, 1568 with your SVG viewbox
// e001 is the unicode point which represents this custom icon. Increment this value for other icons
// replace 'M256...' with your single-path SVG
var faListOldStyle = {
  prefix: 'fas',
  iconName: 'oldm',
  icon: [1792, 1792, [], 'e001', 'M1344 960v-640h-448v1137q119-63 213-137 235-184 235-360zm192-768v768q0 86-33.5 170.5t-83 150-118 127.5-126.5 103-121 77.5-89.5 49.5-42.5 20q-12 6-26 6t-26-6q-16-7-42.5-20t-89.5-49.5-121-77.5-126.5-103-118-127.5-83-150-33.5-170.5v-768q0-26 19-45t45-19h1152q26 0 45 19t19 45z']
}
FontAwesome.library.add(
  faListOldStyle
)
</script>
<script type="text/discourse-plugin" version="0.8">
    api.replaceIcon('shield-alt', 'fas-olm');
</script>

This seems to be broken:

FontAwesome.library.add(
  faListOldStyle
)

Returning the following error:

2742f8c……020da268e4465.js:11 Uncaught ReferenceError: FontAwesome is not defined
    at 2742f8c……020da268e4465.js:11
(anonymous)	@	2742f8c……020da268e4465.js:11

Edit: I looked over your post here, and it worked! Thank you so much for guiding me on this tiny thing!

@pmusaraj

o declare the XML encoding at the top of the file. Copy the contents of https://raw.githubusercontent.com/discourse/discourse/master/vendor/assets/svg-icons/discourse-additional.svg from core, and replace the symbol tags in it with yours, and see if that works.