![]() 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. How does one plug in, say, 圎5CD or \E5CD inline and have it call the appropriate glyph for the custom font you’re calling? So, here I am, left with a serious problem for Internet Explore and Edge. Since this is not how WOFF works, your icons render fine on nearly every browser save for the cast-off children browsers, IE/Edge. With this method, you MUST use a glyph string (as noted above). 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. If I wrote arrow-forward instead, it’d do nothing. As an example, if I span arrow_forward with the TTF/OTF version of Material Icons, it will replace it with a –>. ![]() On the other hand, TTF and OTF formats use strings of characters to call a substitute, singular glyph. 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. 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).įirst off, as of this post, IE and Edge only fully support the WOFF font file format.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |