How to include fontawesome icons in posts?

(Tobias Eigen) #1

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:

Option to move accepted answer to the top
(Jeff Atwood) #2

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

(Mittineague) #3

Something like this?


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


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

(Jeff Atwood) #4

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.

(Sam Saffron) #5

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.

(Tobias Eigen) #6

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.

(Kane York) #7

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

(Simon Cossar) #8

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: Font-Awesome-SVG-PNG/black/svg at master · encharm/Font-Awesome-SVG-PNG · GitHub 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

(Tobias Eigen) #9

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?

(Simon Cossar) #10

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.

(Tobias Eigen) #11

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:

This is what I ultimately went for - thanks.

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

(Sebastian) #12

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

(Marcus Baw) #13

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: GitHub - encharm/Font-Awesome-SVG-PNG: Font Awesome split to individual SVG and PNG files of different sizes along with Node.JS based generator (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.

(Alex Reguyal) #14

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?

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)

(Jeff Atwood) #15

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

(Régis Hanol) #17

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

(Alex Reguyal) #18

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