Introducing Font Awesome 5 and SVG icons


(Jordan) #42

Wiser words have never been spoken! ツ

Thanks for the tip about the implications of the hacky approach I shared, @Falco. I’ll see if I can figure out how to do it the “correct” way when I have some time!


(Joe) #43

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


(Chris Beach) #44

I’ve noticed some of the SVG icons look less elegant than their FontAwesome icon font equivalent.

Example SVG:

01

Example FA:

54

Is it possible for me to tweak the SVG rendering (e.g. stroke width in the above example) to improve their style?


(Joe) #45

I understand where you’re coming from but It actually has nothing to do with SVG icons V.S. font-file.

FontAwesome 5 changed a lot of icons. One of the icons that changed is the calendar icon in your screenshot.

Here’s what the calender icon looked like in FA4

1400

Here are the two free options available for the calendar icon in FA5

1401

1402

and here’s what the FA5 pro - paid - calendar icon looks like

1403


(Chris Beach) #46

Thanks for the insight @Johani. I wonder if there are some nicer SVGs on offer elsewhere (assuming I can use CSS to substitute custom SVGs)


#47

https://thenounproject.com/ ?


(Chris Beach) #48

Good shout @TheBestPessimist


#49

Hello,
I’m brand new to all of this. Is it possible to use icons for each catogery?

For example there is a :poop: posting section, so I’ve added fas fa-poop to the library.

How would I go about using that icon to act as the icon on the shit posting section rather than the brown square that is there now?

I’ve no real experience with css/html but if anyone could show me a quick example and then I’m quite confident I can use that to then go on to change the rest of the icons.

Thank you.