Yes sorry should have updated my post. I have figured out with Font Awesome had to add them to Setup.
And recently learned as you said need to create an svg sprite file to upload to icons-sprites.
Still learning a lot of new things. Appreciate the help in evolving my knowledge. Thank you
The category icons on our site have looked great, until I logged in today. it appears that the padding in between the icon and the category title has no padding, when displayed. Anyone else having this issue?
e.g…
I’m seeing that as well, I’m sure Penar will fix it, but for now this will fix it
.select-kit .select-kit-header .selected-name .name .d-icon {
margin-right: .25em;
}
Thanks both, this should be fixed now.
Is it possible to use other icons that Font Awesome? My forum is about travelling and i need very specific icons that don’t exist there. Can we use a regular png icon file for example? as we do with categories? thanks!
You can use custom icons if you convert them to SVGs and add them to your theme via an SVG sprite. See the “Create an SVG spritesheet” section of this guide on how to add custom icons to your site which you can then use in this component (and throughout your Discourse site).
Works great!
Is it possible for me to tweak it so that the icon appears after the category title?
Bonus question: is it possible to add a tooltip/alt-text?
(Background: I’m hiding the pad lock icon and instead use this component to add an icon to the few public categories I have. And I would like for users to have way to find out what the symbol stands for.)
I am having trouble to use my custom icons. I didn’t get anything that could tell me should I use a prefix or not. Here’s what I am doing.
Here’s the SVG I’m using - https://andronixforumupload.ams3.digitaloceanspaces.com/original/1X/bdabc28a604dc98bb25ce8af2ef6f8dc7c9f2626.svg
As you can see I can’t see the arch icon at all.
icons-sprite:
my-icon in my spreadsheet, I write this:
Result:
@Canapin That doesn’t work. Here’s my sprite file - Sprite File
The image id I am trying - Here
Here’s what I am doing-
Am I doing something wrong?
In your spritesheet, try replacing:
<svg width="0" height="0" class="hidden">
By:
<svg xmlns="http://www.w3.org/2000/svg">
Also there is no need to add the icon id in the svg icons setting fields all your custom icons are already availables from your uploaded spritesheet.
I believe svg icons setting is meant to load additional Font Awesome icons as Discourse only loads a defined, small set by default.
@Canapin Thank you! it worked like a charm. I have one more question though, is this sprite file exclusive to a particular component or I can access the icons with their ids anywhere?
When you upload a file to a used theme or a theme component, you can use it in any other, so I guess you can use your icon ids anywhere.
Hey Penar, will this support the new Font Awesome Pro plugin? Or is there some way to use it already that I’m missing? Thanks!
It should work with the Pro plugin, yes. Are you seeing non-Pro svgs for category icons only?
Yes, after removing my sprite only the non-pro display. Also the non-pro do not follow the fa_icon_style setting for light icons, etc.
Hmm, this works fine on my local site.
That’s the cog icon, using the plugin with the “Light” style selected. Compare that to the regular style below.
But maybe I’m not checking the right thing… let me know if there is a specific icon that isn’t displaying correctly for you.
Here’s an example with it set to light. Image Critiques has the icon comment-alt-edit and does not display (which is a pro icon), Image Showcase has the icon images which is not pro, but is displaying the regular version, not light. Discussions is showing the solid version of comments, and Community is showing the light version of users as expected.
I tried changing one of them to cog, and it works as expected with the proper light version, lots of oddness going on here!
Did you try with far-comment-alt-edit?
Okay I got it now, the key is having far- in the category icon list, not svg icons. So for light icons I have to change them all to fal- and it does not follow the site setting for fa icon style correct?
