# Introducing Font Awesome 5 and SVG icons

**URL:** https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643
**Category:** Announcements
**Tags:** new-feature
**Created:** [11월 9, 2018, 12:55오전 UTC](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643 "2018-11-09T00:55:16Z")
**Posts on this page:** 1
**Showing post:** 43

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [12월 8, 2018, 6:27오전 UTC](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/43 "2018-12-08T06:27:05Z")

</div>

Since you’re adding the elements above the header, you can use the `above-site-header` [plugin-outlet](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/application.hbs#L1)

Now, it’s very simple to do so, there’s more details [here](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648#heading--4-b-1) but the simple version is that you need to wrap your html in this

```plaintext
<script type="text/x-handlebars" data-template-name="/connectors/above-site-header/custom-menu">

</script>

```

Once you do that, you’ll be able to use the `{{d-icon}}` component. So instead of

```plaintext
<i class="fas fa-home fa-sm"></i>

```

you’d use

```plaintext
{{d-icon "home"}}

```

So you end up with this in the header section of your theme

```plaintext
<script type="text/x-handlebars" data-template-name="/connectors/above-site-header/custom-menu">
<div class="navbar">
  <a class="red" href="https://jewelbound.com">
    {{d-icon "home"}}
    <span>Home</span>
  </a> 
  <a class="red" href="https://jewelbound.com/courses">
    {{d-icon "edit"}}
    <span>Courses</span>
  </a> 
  <a class="red" href="https://jewelbound.com/events/">
    {{d-icon "calendar"}}
    <span>Events</span>
  </a>
  <a class="grn" href="https://community.jewelbound.com">
    {{d-icon "comment"}}
    <span>Community</span>
  </a> 
  <a class="red" href="#">
    {{d-icon "star"}}
    <span>Resources</span>
  </a>
</div>
</script>

```

and this small CSS rule

```plaintext
.navbar .d-icon {
  margin-right: 0.5em;
}

```

and that would create

![1340](https://global.discourse-cdn.com/meta/optimized/3X/9/6/966111781da1fb0618b62bed3e62bd8d3e0aeefa_2_690x32.png)

Notice how there’s a couple of icons that are missing, well that happens because those icons you want to use are not included in the default set. FontAwesome 5 has _tons_ of icons and there’s no point loading them if they’re not going to be used.

The missing icons are **star** and **edit**.

Adding icons to the set on your site is very simple. Search for the

`svg_icon_subset`

setting in the admin, and add those there like so:

 ![1351](https://global.discourse-cdn.com/meta/original/3X/7/a/7a8a10254c3ca8e0c991226f3d2e063f61ab49fa.png)

and go look at the header (after a page refresh) and all the icons should display nicely now

![1352](https://global.discourse-cdn.com/meta/optimized/3X/4/6/465d9bc9c017afeb22e6677a782cca69d9295179_2_690x33.png)

---

_[View the full topic](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643)._