Where can I find a list of icons used by Discourse?

Support
1

In the sample “new like icon” repo, we see:

<script type="text/discourse-plugin" version="0.8">
      api.replaceIcon('d-liked', 'thumbs-up');
      api.replaceIcon('d-unliked', 'thumbs-o-up');
      api.replaceIcon('notification.liked', 'thumbs-o-up');
      api.replaceIcon('notification.liked_2', 'thumbs-o-up');
      api.replaceIcon('notification.liked_many', 'thumbs-o-up');
      api.replaceIcon('heart', 'thumbs-up');
</script>

I don’t know that I’d have guessed to replace notification.liked_many_2

Where could we see a list of all the icons in use by discourse?

2 Likes
2

This should be what you are looking for:

11 Likes
3

I was trying to replace an icon over in this topic: How to replace an icon using CSS

The icon in question was .d-icon-lock, but I don’t see it in the list above. Where would I find the icon, so I know what to target in the api.replaceIcon above?

4

In this case you would just use the FA icon name:

<script type="text/discourse-plugin" version="0.8">
  api.replaceIcon('lock', 'times-circle');
</script>
5 Likes
5

I see. I guess I was asking for a list of all icons… perhaps searching the source for {d-icon ' is what I’m looking for.

6

I have the same question, and the link above doesn’t work. I searched and skimmed through a lot of this topic: Introducing Font Awesome 5 and SVG icons
But likewise I don’t see a list to know whether an icon is in the core set or not. Can’t find any other related search results on the forum either.

1 Like
7

Discourse uses the free font awesome icons. All available icons that can be used are found here. You may have to add some icons to the svg icon subset in the site settings. You can see what icons are on your site by adding /styleguide/atoms/icons to the URL. If this does not appear please check styleguide enabled in site settings.

If you want to access the pro icons you need to install the Discourse FontAwesome Pro Plugin plugin.

5 Likes
8

https://meta.discourse.org/styleguide/atoms/icons

You have this on your forum too. You might need to enable the plugin.

5 Likes
9

Thanks @ondrej and @pfaffman ! I was familiar with the use of Font Awesome, and I knew I may need to add some new ones, which is why I wanted to know what was included. The Meta and Styleguide plugin links are both very helpful. Still having a bit of trouble figuring out how to add new ones in some (but oddly not all) cases, but I’ll make a separate topic/reply about that. :wink:

2 Likes