Introducing Font Awesome 5 and SVG icons

[LeoMcA (Leo McArdle)]

@pmusaraj

themes or components :

add a setting with a name ending in _icon and Discourse will automatically add that icon to the subset (provided it’s a valid FA5 icon, of course)

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

[pmusaraj (Penar Musaraj)]

Thanks, I have updated the OP.

[jrgong]

Are there any plans to add Fontawesome Pro support?

[pmusaraj (Penar Musaraj)]

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.

[mmayo (Micah Mayo)]

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?

[pmusaraj (Penar Musaraj)]

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

[mmayo (Micah Mayo)]

No, but that did fix my plugin. Thanks!

[pmusaraj (Penar Musaraj)]

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”).

[Canapin (Coin-coin le Canapin)]

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:

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

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.

[pmusaraj (Penar Musaraj)]

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.

[Canapin (Coin-coin le Canapin)]

Thank you very much, it works.

[kkershaw]

@pmusaraj

In themes : add the SVG sprite in your theme’s /assets folder, and reference it in about.json

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.

[pmusaraj (Penar Musaraj)]

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).

[jameshahnii]

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

[jomaxro (Joshua Rosenfeld)]

@jameshahnii

Push to Github.

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.

[jameshahnii]

Agreed. Make it private.

[TheBestPessimist]

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

[pmusaraj (Penar Musaraj)]

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).

[D8vid]

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