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?

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

If you just want one icon from FA4, extract the SVG of said icon and add it as a custom icon following [imagen]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.

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?

I also tried api.replaceIcon('shield-alt', 'old-icon.svg'); but it also failed.

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

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

You need to follow the instructions Falco linked earlier more closely: [imagen]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.

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: api.replaceIcon('shield-alt', 'icons-sprite'); But something’s wrong with what I did. Sorry for the annoyance I caused you, but I kind of want to finish this quickly.

[imagen] Chaboi_3000: 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.

Ok, I created a png sprite file, but I do I use that in my theme for api.replaceIcon('shield-alt', 'icons-sprite') ?: [icons-sprite] or just [icons-sprite] 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?

¿Usar iconos de Font-Awesome 4 en el tema pero mantener FA5?

Desarrollador

Falco (Falco) 27 Mayo, 2019 14:50 3

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

Tema		Respuestas	Vistas
Introducing Font Awesome 5 and SVG icons Announcements new-feature	131	45195	1 Diciembre 2023
How to replace an existing SVG icon with a custom one? Development	10	835	25 Marzo 2021
Replace Discourse's default SVG icons with custom icons in a theme Developer Guides how-to , theme-guides	10	9586	24 Febrero 2026
Font Awesome in text Product Support	1	201	20 Enero 2025
Changing icons to Font Awesome Pro Version Feature fontawesome-pro , completed	9	2719	9 Mayo 2020

¿Usar iconos de Font-Awesome 4 en el tema pero mantener FA5?

Temas relacionados