Search code examples
cssfontsiconsmaterial-designligature

Why do I need content when using some icon fonts?

I am used to using Google Material icons, to do this I typically include it like this...

// Pug
link(href="https://fonts.googleapis.com/css?family=Material+Icons&display=block", rel="stylesheet")

Inside that is code like this...

// css
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

However, I am using another font icon file and I try to do it the same way but it fails. After some investigation it seems to require an explicit declaration like this...

.ico_thing:before {
  content: "\E000";
}

Notice how the Google package is not explicitly defining the content. Why is this explicitly defined in this library and not in Material?

Solution

  • Google's Material Icons library doesn't rely on the content attribute in pseudoclasses, and in fact doesn't have any explicit CSS for each icon. You can see this by inspecting the example code in their documentation (note the highlighted element):

    enter image description here enter image description here

    As they explain, this is thanks to using ligatures:

    This example uses a typographic feature called ligatures, which allows rendering of an icon glyph simply by using its textual name. The replacement is done automatically by the web browser and provides more readable code than the equivalent numeric character reference.

    Other icon libraries, as you noted, use explicit declarations with content rather than ligatures, mostly to maintain support with older browsers (such as IE 9 and lower). The downside is larger CSS files.