Introducing Font Awesome 5 and SVG icons

The wording here could be clarified. I originally thought this meant doing this:

globe_icon: true
building_icon: true

But what it actually means is doing this:

_icon: "globe|building"

Indeed, the setting name needn’t end in _icon but just has to include that string somewhere in its name:

https://github.com/discourse/discourse/blob/master/lib/svg_sprite/svg_sprite.rb#L321

4 Likes

Thanks, I have updated the OP.

5 Likes

Are there any plans to add Fontawesome Pro support?

No, not in core, because Pro needs a per-site license. However, you can easily add it to your own site through a plugin: simply load an svg sprite with Pro icons and register the icons you need to use. The is all documented in the original post.

11 Likes

2 posts were split to a new topic: Where can I find a list of icons used by Discourse?

We have a plugin adds a Post Menu Button, and have in the past specified ‘ticket’ as the Icon like this:

{
            className: 'zendesk',
            action: 'createTicket',
            icon: 'ticket-alt',
            title: 'zendesk.create_ticket',
            position: 'first'
}

It looks like FA5 uses ‘ticket-alt’ for a similar icon, and Discourse has anticipated this change:

https://github.com/discourse/discourse/blob/stable/app/assets/javascripts/discourse-common/lib/icon-library.js.es6#L440

Whether or not I change the above icon to ticket-alt or not, nothing is rendered, and I the following warnings in the web console:

(of course the deprecation warning is not shown when using ticket-alt.)

Conversely, in our custom footer, we use FAs Social Media Icons, and even when changing to the new ‘brand’/fab syntax they won’t display. If I link to the FA5 css cdn in my theme, they will show up (but the plugin icons do not).

This makes me wonder if there is something I am missing, or. a step I need to use the new Icons. I’ve looked over this thread a number of times and haven’t found an answer. Any suggestions?

Have you tried adding “ticket-alt” to the svg icon subset site setting?

6 Likes

No, but that did fix my plugin. Thanks!

2 Likes

Cool. You can also register the icons in your plugin.rb file using:

register_svg_icon "ticket-alt"

That’s a cleaner way for plugins to make sure Discourse includes that icon. Same for the brand/regular icons (“fab-brand-icon-name”).

8 Likes

Hi!
I’ve updated my theme so it properly displays some icons from Font Awesome 5.

But for some reason, I can’t get to have the Facebook icon displayed.

It is registered in my admin:
image

The angle downs are displayed but the facebook icon tag is empty:


image
Website: https://forum.monocycle.info/

Any idea why only the facebook logo doesn’t show up? I tried other icons (baby carriage for example) and those work.

FA5 has moved brand icons to a separate bundle, this is described in the OP, but essentially, you need to prefix these icons with fab-, so try fab-facebook-f.

8 Likes

Thank you very much, it works.

2 Likes

I was wondering how to include a custom SVG icon in my theme, in particular to replace the search, hamburger and other icons. Is this only possible if I use a remote theme with an assets folder and about.json file? I’m a bit confused how I could go about this otherwise.

You can upload the SVG sprite with your custom icons directly via the UI, just make sure the variable name for it is icons-sprite. Then the icons in your sprite should be available to use (you can use the JS API to replace the hamburger icon, for example).

6 Likes
  1. Use the plugin rails generator to create a plugin.
  2. Download Font Awesome Pro for web.
  3. Unzip the file and add the sprites folder to your local Discourse folder per the “In plugins: simply…” instructions above.
  4. Push to Github.
  5. Add the plugin to your YML.
  6. Rebuild the app.

Boom. You got Font Awesome Pro. I just did it and it miraculously worked on the first try. haha

8 Likes

I’m not a lawyer, but given that Font Awesome Pro is not free, I’d suggest caution pushing the files to GitHub, especially if the repo is public. It may violate the terms of your license.

9 Likes

Agreed. Make it private.

I’d like to use the solved icon as a custom emoji (or just to paste it in a post like this one). The html that discourse uses is the following:

<svg class="fa d-icon d-icon-check-square-o svg-icon svg-string"><use xlink:href="#far-check-square"></use></svg>

But how can i embed it into a post?

just pasting it won’t work:
before icon after icon.

Here’s the raw variant of this post for quick access: https://meta.discourse.org/raw/101643/102

1 Like

The icons cannot be used in this way in the composer. If you absolutely must use an icon, you can download the individual SVG file from Font Awesome and then upload it as a regular image (the site must also whitelist uploading of SVGs).

6 Likes

Here are my quick notes for using FA PNG icons as emoji (in posts, etc.):
git clone https://github.com/encharm/Font-Awesome-SVG-PNG
Drag & Drop desired 64x64 white (or black) PNG files to new folder, rename each icon with ‘fa-FILENAME.png’
Drag & Drop renamed icons to /admin/customize/emojis

2 Likes