How to include fontawesome icons in posts?

I’ve seen this in the past and would love to be able to include fontawesome icons on a regular basis. Can’t find it! For right now if someone could help me with a hack I’d be grateful. I want to embed the fa-comments, fa-search and fa-sandwich (or whatever it’s called) in a post explaining discourse features.

Down the road… perhaps there’d even be appetite for a plugin to support fa tags as emoji? Came across this interesting page:

1 Like

No, use Emoji for this. Arbitrary CSS in posts will never be supported. Sorry.

Something like this?

plugin.rb

register_asset "javascripts/fa-in-posts.js.es6", :server_side

fa-in-posts.js.es6

Discourse.Markdown.whiteListTag("i", "class", /fa fa-[-a-z]+/);

4 Likes

That is a nice workaround but IMO you are better off teaching users standard emoji, which is a Unicode standard and will basically work anywhere in the future – versus the random, arbitrary font awesome classes.

6 Likes

There is one edge case where this is reasonable, teaching people what the various glyphs in Discourse mean. Though, probably, screenshots would do fine for that case.

5 Likes

This is precisely what I am trying to do. I’ve written up a new member checklist and want to reference the notifications, search, hamburger menu options, inline, like this. But I don’t know how to do that for notification and search.

5 Likes

You can add custom emoji for just the icons that show up in the interface.

2 Likes

It seems that font-awesome icons will work if you upload them as svg files. I am surprised that they are displaying inline correctly. I don’t know if you can count on them doing that.

You can get the icons here: https://github.com/encharm/Font-Awesome-SVG-PNG/tree/master/black/svg The icons seem to default to width="500" height="500" To display them at a smaller size, you need to edit those values. The icons in this post are set to width="45"height=“45”

To get it to work you need to add svg to the authorized extensions in admin>files

1 Like

Many thanks! This is the solution I am looking for, simply to help show new members around my site. It’s easier to say “look for the to see your notifications” than the alternatives. w00t!

However, on my site for some reason the svgs are not displaying correctly, even though I allow uploading of all file types. Is there another setting I am missing?

I just tried it on a live instance of Discourse and I am getting the same results as you are. It works in my local development environment, and it works here on meta.discourse. If I include the link to one of the SVG images from this topic on my own forum then it displays correctly. I am guessing that SVG file uploads are being disallowed for security reasons.

https://meta.discourse.org/t/is-it-possible-to-add-svg-images-to-a-post/9692

1 Like

OK - thanks for testing this me.

This can work - thanks. I see you can download the whole shebang in PNG and SVG from github, then select the ones that you need:

https://github.com/encharm/Font-Awesome-SVG-PNG

This is what I ultimately went for - thanks.

Just grabbed icons from the screen and inserted inline into the text. It looks pretty decent!

1 Like

This new member checklist is pretty awesome, by the way!

2 Likes

My use-case was as described by @sam above, in that I wanted to use Discourse UI glyphs in explanatory notes for users.

I’ve found that by enabling SVG upload in Authorized Extensions http://{yoursite}/admin/site_settings/category/all_results?filter=authorized you can add multiple SVG Fontawesome glyphs using drag and drop.

Get the fontawesome SVGs here: https://github.com/encharm/Font-Awesome-SVG-PNG (link from a previous post in this thread)

Drag and drop a multiple selection from your file manager into the input box at http://{yoursite}/admin/customize/emojis and you will see them added to the Custom Emoji list, with a default name that is the same as the filename.

Refresh the page, and you can now search your custom emoji when typing by starting with : and typing a few characters of the emoji you want.

8 Likes

I followed all the instructions above but in the third step, I get this message that had been raised multiple times in this forum:
Sorry, but we couldn’t determine the size of the image. Maybe your image is corrupted?

https://github.com/discourse/fastimage/commit/48b0f5304c030fd0a33976f4428a8fb89ee09377

This issue should have been fixed a year ago. I don’t understand why this error is still showing up (I’m using v1.8.0.beta11)

2 Likes

Might be a svg related regression for @zogstrip to look at.

Just tried with random black SVGs from font awesome and they worked just fine. Can you tell me which one doesn’t work?

3 Likes

Sorry, it’s still not working for me. Am I missing something? I have the most current version of Discourse (1.8.0.beta13).

Pretty sure it’s fixed now. Feel free to flag to re-open if it’s still an issue in latest Discourse.

5 Likes