3

I'm working since years with iconic fonts like font-awesome.

Until now, when I need to add an heart icon on a web page, I use this html syntax

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

Technically, it uses the pseudo-element :before and link the class name with the iconic font's character 

fa-heart:before {
  content: "\f004";
}

But, in the documentation of the next font-awesome release, the new way to do it is :

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

How is it possible, technically, to replace the heart word by the corresponding icon ? Where is the trick ?

PEC
  • 632
  • 1
  • 11
  • 28

2 Answers2

1

They are referring to the set of characters as a ligature which can then be acted on to turn into a distinct icon.

Basically a ligature is the combination of two or more characters, when a font specifies these combinations it can choose how to display the result of combining them.

Traditionally a ligature is used for joining two letters together so they flow well when placed next to each other. This technique is using the CSS version of ligatures to set custom icons.

enter image description here

For more information on the subject check out this page: https://css-tricks.com/ligature-icons/

This has also been discussed in this answer with respect to Material icons: https://stackoverflow.com/a/44928943/1528308

Alex
  • 2,651
  • 2
  • 25
  • 45
0

From this article : https://alistapart.com/article/the-era-of-symbol-fonts

Fonts also have special characters called ligatures—subtle, often hardly noticeable, tweaks to the letterforms that are used to aid reading. Take, for instance, two consecutive “f” characters. A good font will convert that “ff” into a single ligature where the fs connect smoothly. There are several standard ligatures, including ff, fl, and fi. But there is no reason you can’t also define your own. In a font file, it is a simple substitution; all the ligature is looking for is the right sequence of letters. When they’re typed, they are replaced with another glyph. This means you can have a string like “A List Apart” and convert it into a single symbol icon of the logo.

PEC
  • 632
  • 1
  • 11
  • 28