Manually inserting font with HTML

Support
1

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?

2

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

3

Why not use the Unicode emoji instead?

4

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.

2 Likes
5

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?

6

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.

4 Likes