1

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?

JGleason
  • 3,067
  • 6
  • 20
  • 54
  • to display anything with `before` you have to use `content` read this https://stackoverflow.com/questions/9599811/why-do-i-need-an-empty-content-property-on-an-after-pseudo-element – noname Jan 08 '20 at 16:26
  • I get that but why don't I need it with google – JGleason Jan 08 '20 at 16:31

1 Answers1

1

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.

Jon Uleis
  • 17,693
  • 2
  • 33
  • 42
  • I think this is exactly what I am trying to understand do you have more links about this? (missed link but any info is awesome) – JGleason Jan 08 '20 at 16:32
  • Sure, here's a few helpful links: https://alistapart.com/article/the-era-of-symbol-fonts/ - and - https://css-tricks.com/ligature-icons/ – Jon Uleis Jan 08 '20 at 16:33
  • What is the content string called (if the other is a ligature)? The "\E000" – JGleason Jan 08 '20 at 16:44
  • ISO numeric codes: http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/ – Jon Uleis Jan 08 '20 at 17:04