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!
3 Likes
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
14 Likes
I’ve noticed some of the SVG icons look less elegant than their FontAwesome icon font equivalent.
Example SVG:
Example FA:
Is it possible for me to tweak the SVG rendering (e.g. stroke width in the above example) to improve their style?
7 Likes
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
Here are the two free options available for the calendar icon in FA5
and here’s what the FA5 pro - paid - calendar icon looks like
12 Likes
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)
2 Likes
Hello,
I’m brand new to all of this. Is it possible to use icons for each catogery?
For example there is a 
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 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.
1 Like
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)
- Go to this official Font Awesome page titled Get Started with Font Awesome which seems to be the latest 4.x.x-version
- Type your email to have them send you what is called a CDN
- Copy the short
<script src=[...]></script>that they emailed you into your skin’s HTML (such as the</head>tab) - 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 (
:beforeand<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
:beforeor<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. 
3 Likes
@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.
5 Likes
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.
5 Likes
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.
2 Likes
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.
8 Likes
As long as it is really a temporary fix, that’s fine. This did not come across to me in your original post, though.
8 Likes
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?
1 Like
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.
5 Likes
Wonderful! thanks so much
2 Likes
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’);
8 Likes
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.
14 Likes
Ok, adding custom icons in a plugin should now be doable as of
https://github.com/discourse/discourse/commit/47cbfb14989bcf828c66b211827cb9355214e71a
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.)
19 Likes