# ¿Usar iconos de Font-Awesome 4 en el tema pero mantener FA5?
**URL:** https://meta.discourse.org/t/use-font-awesome-4-icons-in-theme-but-keep-fa5/118776
**Category:** Development
**Created:** [27 Mayo, 2019 09:30 UTC](https://meta.discourse.org/t/use-font-awesome-4-icons-in-theme-but-keep-fa5/118776 "2019-05-27T09:30:16Z")
**Posts on this page:** 17
**Page:** 1
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](https://fontawesome.com/v4.7.0/get-started/?utm_source=fontawesome4.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
> [@Introducing Font Awesome 5 and SVG icons](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/1):
>
> **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:
```plaintext
api.replaceIcon('shield-alt', '$old-icon);
```
But it leaves a blank space instead of loading the SVG icon. Am I doing something wrong?
---
You need to follow the instructions Falco linked earlier more closely:
> [@Introducing Font Awesome 5 and SVG icons](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/1):
>
> 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:
>
> ```plaintext
> "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](https://raw.githubusercontent.com/discourse/discourse/master/vendor/assets/svg-icons/discourse-additional.svg)). 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:
```plaintext
```
But something’s wrong with what I did. Sorry for the annoyance I caused you, but I kind of want to finish this quickly.
---
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?
---
Let’s say your sprite file contents is this:
```xml
```
You need to have ids for each symbol, so that you can use those in JS, for example:
```js
api.replaceIcon('shield-alt', 'super-icon1')
```
---
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](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.
---
> [@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](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:
```plaintext
```
This seems to be broken:
```plaintext
FontAwesome.library.add(
faListOldStyle
)
```
Returning the following error:
```plaintext
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](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.