Streaming live at 10am (PST)

Icon Fonts & Unicode


#1

It is frustrating to see all the posts about icon fonts closed before they have been properly answered, so before this gets flagged as duplicative, please note that what I am looking to solve is the use of a custom font for icons (Material Icons by Google) that is compatible with IE/Edge and does not use anything other than HTML/CSS (because, seriously, that's all this should need as an MVP feature).

First off, as of this post, IE and Edge only fully support the WOFF font file format. Great news considering WOFF and WOFF2 are the smallest sized font file formats, yay! Bad news, you need to use the unicode to call the glyph.

On the other hand, TTF and OTF formats use strings of characters to call a substitute, singular glyph. As an example, if I span arrow_forward with the TTF/OTF version of Material Icons, it will replace it with a –>. If I wrote arrow-forward instead, it'd do nothing.

This differs from how custom fonts (therefore, adding Material Icons or Font Awesome easily and quickly) are added to a Webflow project: in that, you upload the font files you want to use and then apply them in the Designer Style's view. [As of this post, you cannot apply more than one font to a class without doing so by injecting a duplicative style line in the head or body. That's quite a pitty.] With this method, you MUST use a glyph string (as noted above). Since this is not how WOFF works, your icons render fine on nearly every browser save for the cast-off children browsers, IE/Edge.

So, here I am, left with a serious problem for Internet Explore and Edge. How does one plug in, say,  or \E5CD inline and have it call the appropriate glyph for the custom font you're calling?

PS. I'd like to note that I've tried this with the EOT, OTF, TTF, WOFF, and WOFF2 formats for Material Icons, as well as using the actual Google stylesheet link itself to absolutely no success. I've used both a font-family list that goes something like this font-family: 'Materialicons1 regular', 'Materialicons2 regular', 'Materialicons3 regular', 'Materialicons4 regular', sans-serif !important; with each numerical version being a file format I added to the Custom Fonts list, as well as calling the Google-hosted stylesheet.


#2

I'm not sure if Material has a similar 'cheatsheet' that you can copy the icons from and paste into Webflow, but I have done this for Font Awesome.

  1. Upload font awesome font to Webflow
  2. Select and copy selected icon from http://fontawesome.io/cheatsheet
  3. Paste into Webflow and select the Font Awesome font
  4. Publish and view online

As it's a font, you can manipulate the icon size using the font size style, as well as change colors, etc.

See icons in use on my site's footer: https://samliew.com

There are also other ways to use Material Icons, like SVG image or code: https://materialdesignicons.com

You should also be able to put the HTML code directly in the embed code component:

<i class="material-icons medium">arrow_forward</i>