### Author:  [@TotalSoft](https://meta.discourse.org/u/TotalSoft)
#### Post date: [Novembro 30, 2018, 11:34am UTC](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/21 "2018-11-30T11:34:30Z")
Thanks, but for some reason, it didn’t work your method. I do not know if this solution is the best but it worked for me:
```plaintext
// Add Font Awesome 5 Icons to the navigation bar
@import "common/foundation/mixins";
a[href="/categories"]:before {
background: transparent;
content: svg-uri('
### Author:  [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [Novembro 30, 2018, 3:56pm UTC](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/22 "2018-11-30T15:56:06Z")
After a lot of research and guessing, I was able to get the svg icons to work.
First, I opened the svgs I downloaded from FA in Illustrator and followed this [https://medium.com/@colinlord/how-to-export-svgs-for-the-web-from-illustrator-829bc1c841f6](https://medium.com/@colinlord/how-to-export-svgs-for-the-web-from-illustrator-829bc1c841f6) to export. I’m not sure if this step was necessary.
Then I uploaded those svgs into the theme component, copied the url and put them into the css which ended up looking like this:
> **CSS**
>
> ```
> .b-header a::before{
> filter: invert(90%) sepia(30%) saturate(839%) hue-rotate(336deg) brightness(101%) contrast(99%);
> display: inline-block;
> content: ' ';
> background-size: contain;
> height: 15px;
> width: 15px;
> margin-right: 8px;
> margin-top: 4px;
> }
>
> .b-header .nav-pills > li:nth-child(1) a::before {
> background: url('https://npn.sfo2.digitaloceanspaces.com/original/2X/5/5937500ddd5d68b25c8e3667b313901a1d4a61f7.svg'); //home
> background-repeat: no-repeat;
> }
>
> .b-header .nav-pills > li:nth-child(2) a::before {
> background: url('https://npn.sfo2.digitaloceanspaces.com/original/2X/d/de70170d27c1658c0d275e4dd870f03a786da3eb.svg'); //community
> background-repeat: no-repeat;
> }
>
> .b-header .nav-pills > li:nth-child(3) a::before {
> background: url('https://npn.sfo2.digitaloceanspaces.com/original/2X/b/b60d7c286f8e99a461cc5e4051a2611b201d7be2.svg'); //articles
> background-repeat: no-repeat;
> margin-top: 6px;
> }
>
> .b-header .nav-pills > li:nth-child(4) a::before {
> background: url('https://npn.sfo2.digitaloceanspaces.com/original/2X/0/01e24533f51b29ed3f80d78d28bd070c6eb33826.svg'); //store
> background-repeat: no-repeat;
> margin-top: 3px;
> }
>
> .b-header .nav-pills > li:nth-child(5) a::before {
> background: url('https://npn.sfo2.digitaloceanspaces.com/original/2X/2/2e0f64a2ce8567c036c42c38124aa0811c0a036d.svg'); //archive
> background-repeat: no-repeat;
> margin-top: 2px;
> }
>
> .b-header .nav-pills > li:nth-child(6) a::before {
> background: url('https://npn.sfo2.digitaloceanspaces.com/original/2X/5/58116cd2824c5162baa55ab9b4938fa059021ba7.svg'); //info
> background-repeat: no-repeat;
> margin-top: 0px;
> }
>
> .b-header .nav-pills > li:nth-child(7) a::before {
> background: url('https://npn.sfo2.digitaloceanspaces.com/original/2X/8/80598d927cf15ac38700dd160459de3a31320bcd.svg'); //contact
> background-repeat: no-repeat;
> }
>
> .b-header .nav-pills > li:nth-child(8) a::before {
> background: url('https://npn.sfo2.digitaloceanspaces.com/original/2X/0/07c0588accc7bb303039ebcbbb7fb28d198a286a.svg'); //account
> background-repeat: no-repeat;
> }
>
> ```
The key to changing the color of the svg was using `filter: invert(90%) sepia(30%) saturate(839%) hue-rotate(336deg) brightness(101%) contrast(99%);`
You can convert hex colors to filter here: [https://codepen.io/sosuke/pen/Pjoqqp](https://codepen.io/sosuke/pen/Pjoqqp)
Also the icon was tiling so I had to add `background-repeat: no-repeat;`
For some reason the icons were not aligning so I had to adjust the `margin-top:;` for each icon. I’m sure there’s a more elegant way of achieving this!
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [Novembro 30, 2018, 5:58pm UTC](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/23 "2018-11-30T17:58:47Z")
Right, using SVGs as a linked image unfortunately means you can’t control the fill color. As you discovered, CSS filters are one way to overcome this.
What was missing was the height/width attribute within the SVG file. If you open an SVG in a text editor, you’ll see this:
```SVG
### Author:  [@Grex315](https://meta.discourse.org/u/Grex315)
#### Post date: [Dezembro 1, 2018, 1:15am UTC](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/24 "2018-12-01T01:15:14Z")
How would I do this for a brand icon? I entered “fab fa-discord” into site settings and added this html
```plaintext
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [Dezembro 1, 2018, 1:45am UTC](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/25 "2018-12-01T01:45:51Z")
> [@Grex315](#):
>
> \
Use `#fab-discord` here
---
### Author:  [@LKNickname](https://meta.discourse.org/u/LKNickname)
#### Post date: [Dezembro 3, 2018, 2:05am UTC](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/26 "2018-12-03T02:05:16Z")
Do you have a fix for the old “Add icon to header”-function?
As of now I am using code very similar to the following within my header:
```
api.decorateWidget('header-icons:before', helper => {
return helper.h('li', [
helper.h('a#globe-button.icon', {
href:'https://www.website.com/',
title: 'Back to website'
}, helper.h('i.fa.fa-globe.globe-button-icon.d-icon')),
]);
});
```
Ofc the “i”-functionality is broken but since I am no dev myself I was wondering what to tweak in order to get the icons displayed again 🙂
---
### Author:  [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [Dezembro 3, 2018, 2:32am UTC](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/27 "2018-12-03T02:32:10Z")
Hey @LKNickname, try this out:
```js
const { iconNode } = require("discourse-common/lib/icon-library");
api.decorateWidget("header-icons:before", helper => {
return helper.h("li", [
helper.h(
"a#globe-button.icon",
{
href: "https://www.website.com/",
title: "Back to website"
},
iconNode("globe")
)
]);
});
```
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [Dezembro 3, 2018, 2:56am UTC](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/28 "2018-12-03T02:56:58Z")
Thanks @tshenry, I’ve also updated the [original how-to](https://meta.discourse.org/t/add-new-link-on-header-beside-search-icon/48621).
---
### Author:  [@LKNickname](https://meta.discourse.org/u/LKNickname)
#### Post date: [Dezembro 3, 2018, 4:59am UTC](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/29 "2018-12-03T04:59:40Z")
Worked like a charm, thanks 🙂
---
### Author:  [@jord8on](https://meta.discourse.org/u/jord8on)
#### Post date: [Dezembro 4, 2018, 5:01am UTC](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/30 "2018-12-04T05:01:44Z")
I’ve read all the replies here and am trying to keep this as simple as possible
This is what my html looked like before:
> ` Courses Courses
### Author:  [@Stranik](https://meta.discourse.org/u/Stranik)
#### Post date: [Dezembro 4, 2018, 5:36am UTC](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/31 "2018-12-04T05:36:42Z")
In the `*.hbs` file, you can replace it with:
`{{d-icon "edit"}} Courses `
In widgets:
```
+ import { iconHTML } from "discourse-common/lib/icon-library";
+ let icon_edit = iconHTML('edit');
+ ${icon_edit}
```
It works for us.
Much depends on where you add the icons (via plugin, admin panel …). Examples of the above we did for plugins.
---
### Author:  [@jord8on](https://meta.discourse.org/u/jord8on)
#### Post date: [Dezembro 4, 2018, 5:50am UTC](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/32 "2018-12-04T05:50:18Z")
Thanks for the response @Stranik.
Something interesting is that I only changed my html for the “home” link, which is the first of my five links in the global nav bar. It didn’t work. Then about 30 minutes laters I looked at the site and it was working! So I’ve updated all of my other links to follow the same convention. Same issue… not working… but I’m wondering if some time passes and they will load as well ¯\_(ツ)\_/¯
While the Home icon seems to be working… for all of the links I’m getting an error…
But… back to your suggestion…
> In widgets:
>
> ```plaintext
> + import { iconHTML } from "discourse-common/lib/icon-library";
> + let icon_edit = iconHTML('edit');
> + ${icon_edit}
>
> ```
If I were to go the route you suggested, where would I add all of this? ⬆︎
---
### Author:  [@Stranik](https://meta.discourse.org/u/Stranik)
#### Post date: [Dezembro 4, 2018, 6:09am UTC](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/33 "2018-12-04T06:09:21Z")
The option with the plugin (widgets), the one that I gave above, does not suit you.
I think, in your case, the option suggested above in the post will work:
> [@Introducing Font Awesome 5 and SVG icons](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/23):
>
> Right, using SVGs as a linked image unfortunately means you can’t control the fill color. As you discovered, CSS filters are one way to overcome this. What was missing was the height/width attribute within the SVG file. If you open an SVG in a text editor, you’ll see this: \ \ `
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [Dezembro 4, 2018, 2:06pm UTC](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/34 "2018-12-04T14:06:01Z")
For the edit icon, you can use the following SVG code:
```plaintext
```
Note that you should aim to figure out how to use the JS/Handlebars helper functions in the OP, they automatically handle renamed FontAwesome icons. When using SVGs directly, you’re going to need to track down the icons yourself. As you can see in code above, the `edit` icon in FA5 is called `pencil-alt` in the `` tag. (For other renames, refer to the [FontAwesome upgrade guide](https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4).)
Also note that the class to include in the `svg` element is `fa`, not `fas`.
---
### Author:  [@jord8on](https://meta.discourse.org/u/jord8on)
#### Post date: [Dezembro 4, 2018, 4:55pm UTC](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/35 "2018-12-04T16:55:57Z")
> [@pmusaraj](#):
>
> Note that you should aim to figure out how to use the JS/Handlebars helper functions in the OP
I agree with your sentiment here and am okay with a CSS only solution.
Can you tell me exactly what JS I need to put in my \ ? And what the matching HTML element should look like?
I had a tough time interpreting the OP 😞 I’m pretty new to all of this
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [Dezembro 4, 2018, 5:09pm UTC](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/36 "2018-12-04T17:09:23Z")
I think your best bet here is to look at how some theme components work. I would highlight these two specifically:
> [@Brand Header](https://meta.discourse.org/t/brand-header-theme-component/77977):
>
> discourse2Summary Brand Header adds an extra top header for branding with your logo, navigation links, and social icons for both mobile and desktop views. Brand logo can be an image or text.eyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/brand-header)hammer_and_wrenchRepository Link [https://github.com/discourse/discourse-brand-header](https://github.com/discourse/discourse-brand-header)open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme component Features Desktop preview: …
and
> [@Header Submenus](https://meta.discourse.org/t/header-submenus/94584):
>
> discourse2Summary Header Submenus will allow you to build a header menu - with submenus - using plain text!eyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/header-submenus)hammer_and_wrenchRepository Link [https://github.com/discourse/discourse-header-submenus](https://github.com/discourse/discourse-header-submenus)open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme component Features Desktop Mobile Settings Name Description Menu items Add menu items. O…
You can install these two components on your site, and/or inspect their code to see how they use JS to insert elements on the page.
---
### Author:  [@jord8on](https://meta.discourse.org/u/jord8on)
#### Post date: [Dezembro 6, 2018, 1:24am UTC](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/38 "2018-12-06T01:24:28Z")
Just reporting back a simple CSS solution that worked for me and coincides perfectly with my global navbar in wordpress:
I added the following to :
> ` Home Courses Events Community Resources
### Author:  [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [Dezembro 6, 2018, 1:32am UTC](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/39 "2018-12-06T01:32:41Z")
This will make your site load both the SVG version of Font Awesome and the WebFont version, which will be a extra bytes (85kb).
Not to mention that the extra CSS (foreign to Discourse now) can break in weird ways in the future.
---
### Author:  [@jord8on](https://meta.discourse.org/u/jord8on)
#### Post date: [Dezembro 6, 2018, 1:37am UTC](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/40 "2018-12-06T01:37:13Z")
YOWZA! That’s not good to have all the extra bytes. Is there a way to prevent it from loading the SVG version as well? It was just so much easier to do this approach, and I just wanted my icons back up as quick as possible.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [Dezembro 6, 2018, 1:39am UTC](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/41 "2018-12-06T01:39:41Z")
I think you need to do this the correct way rather than the “easy” way..
[Previous page](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643.md?page=1)
[Next page](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643.md?page=3)