Since you’re adding the elements above the header, you can use the above-site-header plugin-outlet
Now, it’s very simple to do so, there’s more details here but the simple version is that you need to wrap your html in this
<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
<i class="fas fa-home fa-sm"></i>
you’d use
{{d-icon "home"}}
So you end up with this in the header section of your theme
<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
.navbar .d-icon {
margin-right: 0.5em;
}
and that would create
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:
and go look at the header (after a page refresh) and all the icons should display nicely now
