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 :poop: 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.


#50

For those struggling with this change breaking all the Font Awesome 4 icons on their website, I have found “the easy way” to fix it and highly recommend it for the time being. (Disclaimer: I am not an authority here, just someone who uses and loves this software)

  1. Go to this official Font Awesome page titled Get Started with Font Awesome which seems to be the latest 4.x.x-version
  2. Type your email to have them send you what is called a CDN
  3. Copy the short <script src=[...]></script> that they emailed you into your skin’s HTML (such as the </head> tab)
  4. Refresh your page (and maybe your browser cache) and your Font Awesome 4 icons will be restored.

Yes, this will add a few KB to your page, but it will also make your page function immediately. If you are interested in shaving off the extra KB on your site’s initial load time, then you can add “convert to FA5” to your list for when you have the time. Meanwhile your site continues to function while you take the time to do these changes.


In the future I hope Discourse can avoid silently dropping features like this, especially when it is definitely aware of them as “breaking changes”. I used the previously-supported CSS :before method in my skin to insert icons where I wanted them, because there were no handlebars at those locations and this was a simple and easy way to get them exactly where I wanted with no fuss. In retrospect, I would have expected one or two of the following options to have been in place:

  • Show a message on the admin panel or update pages explaining that certain features (:before and <i> icon methods) would soon be dropped, so that we are aware beforehand that all our icons are about to be replaced with empty boxes. (meta-discourse announcements are not otherwise in my radar, and they shouldn’t have to be)
  • Provide a new website option for reverting to Font Awesome 4, with the note that all new discourse installations will use only FA5 and that support for this FA4 compatibility option would eventually be dropped.
  • Provide a set of official instructions for converting :before or <i class="fa fa-icon"></i> usages to the new system. In this case I don’t think this would have been possible, because these changes are not necessarily trivial, especially in the case of :before.
  • Allow us to use an older version of Discourse that will continue to receive security updates but not breaking changes. (Right now the big sad face on the admin screen every 20 days seems to discourage this method of keeping our websites intact)

Fact is, this update has breaking changes in it, and these changes were not advertised to all the site admins using discourse, and these changes do not have any official instructions for making a smooth transition. Shaving off KBs and other optimizations are great, but in my opinion, not unexpectedly breaking websites to get there is even better, so I am confused why the official statements here actively discourage “the easy way” I have given as a temporary solution. I love Discourse and hold a very high opinion of it, but I also want to have to visit meta-discourse as infrequently as possible. :slight_smile:


(Jeff Atwood) #51

@troid92 you’ve given problematic advice for these reasons, as previously stated:

If you don’t want to fix things, never upgrade your Discourse instance. You will eventually get hacked and compromised, of course, but that’s your choice. If you want zero effort, I suggest you pay for managed hosting. Otherwise, you may have to do an hour or two of work per month when choosing to host your own Discourse.

Free software is indeed free, but people’s time isn’t.


#52

Respectfully, I am aware of the problem with my advice. In my post I said that this is a temporary solution so that one can take the time to convert to FA5 icons.

It is completely reasonable to expect web admins to perform an hour or two of work per month to maintain a Discourse server through updates, and I was never contesting that. I have been doing that at each update for the past year, and things have been going very smoothly.

Where I was coming from is that upgrading my skin from FA4 will take me more than 1-2 hours, and it arrived as a surprise fire to put out immediately. This is why I found a way to delay that fire by a week, and suggested possible solutions like an in-app heads-up next time. I am sorry if the tone of my first post was colder than I intended – it was meant to be constructive.

@codinghorror Thank you so much for providing free software, and I hope to continue posting feedback and any bugs I find to help it improve and grow.


(Stephen) #53

It’s not a temporary solution, it’s a band-aid to a symptom which ultimately makes it harder to identify and fix the broken icons.

Better to not add the script, identify and fix in all cases. Once a site adds the band-aid there is no impetus to fix it for real.


(cpradio) #54

I disagree. You can simply create a copy of your theme, remove the script tag, click preview and see what broke. The rest of your members see a functional site as you work to resolve the issues. This gives them the impression of stability while you are only aware of the underlying issues at hand.

I spent more time than I’d like to admit to fix our instance (SP) which is hosted, it was definitely more than 1-2 hours and some of the fixes were not obvious. In some places you had to set width and heights both on the object and in the svg, along with figuring out coloring, etc. It took time. Sure I got it done, but I also used a “preview” theme to ensure I didn’t make the experience worse for anyone else in the meantime.


(Jeff Atwood) #55

As long as it is really a temporary fix, that’s fine. This did not come across to me in your original post, though.


(Sarah) #56

Using icons in your handlebars templates

Is there any way to specify the size of the icon in the handlebars code (eg: size=‘2x’ )? or should we do this in CSS?


(Penar Musaraj) #57

You would have to specify the size in CSS. The d-icon helper can take a title parameter, but not a style or size parameter.


(Sarah) #58

Wonderful! thanks so much :slight_smile:


(Sarah) #59

I was hoping to replace a Discourse icon with a custom one. Would there be a way to register my custom icon in Discourse somewhere? ie)

register_svg_icon “my-icon” as <svg>...</svg>

then be able to

api.replaceIcon(‘heart’, ‘my-icon’);

(Penar Musaraj) #60

That’s a nice idea, we should support adding a custom icon in this fashion. We currently don’t. I’m going to look into it in more detail in the next few days.


(Penar Musaraj) #61

Ok, adding custom icons in a plugin should now be doable as of

So, basically, add the SVG sprites to your plugin, in plugins/svg-icons. See https://raw.githubusercontent.com/discourse/discourse/master/vendor/assets/svg-icons/discourse-additional.svg for an example. Next, register your icon, and you should be good to go.

(I would prefix the icon ids in the plugin, to avoid any potential clash with FontAwesome icon names.)