Manually inserting font with HTML

AI-generated summary

A user, verilog15, is trying to manually insert Font Awesome symbols into a discussion using HTML, but the fa fa-heart-o class is not working. zogstrip suggests adding custom CSS to force a size, while codinghorror recommends using Unicode emojis instead.

pmusaraj explains that Font Awesome has switched to SVG icons since November 2018 and suggests using SVG syntax. verilog15 expresses concerns about using Unicode emojis due to consistency and browser support issues, and requests an example of how to use SVG icons.

pmusaraj provides a link to a meta discussion about introducing Font Awesome 5 and SVG icons, and mentions that there are tools in the core to use them in both Ruby and Ember, which may be useful for adding icons to a plugin.

Hello :slight_smile:
I’m trying to add the following two symbols::heart: and :white_check_mark: by using HTML.
As I understand they are fonts from Font Awesome so I tried to insert:

<i class="fa fa-heart-o"></i>

But it does not insert the font:

image

It adds something of size 0x0. What is the proper way to add the font?

Have you tried adding some custom CSS to force a size?

Why not use the Unicode emoji instead?

That is the old format. We have switched to SVG icons for FontAwesome (since November 2018), we now use svg syntax instead of the font-icon i elements.

I have managed to make it work with the Unicode emojis but I guess it is not the solution because of the following two reasons:

  1. Consistent to the other emojis. For example, if I’ll decide to change the emoji type from Windows 10 to apple than I’ll have to change also in the plugin.
  2. Not sure if old browsers support those type of fonts/Unicode.

But I guess it is better than using the SVG if speaking of efficiency.

Do you mind to show a small example of how to use one maybe?

If you are adding these icons to a plugin, there are tools in core to use them in both Ruby and Ember. See Introducing Font Awesome 5 and SVG icons for a start.