Implementation of fontawesome-svg-core and pro-light-svg-icons does not show icons in IE11. Works in Chrome and Firefox

user_6172408 0
Viewed 327

SUMMARY

Having trouble getting FontAwesome Pro icons to show in IE11 (they work fine in Chrome and Firefox). No console errors reported, but inspection of the DOM shows that the <i> tags are not being converted to <svg> tags:

IE11 DOM INSPECTION

<i class="fal fa-lg fa-angle-right"></i>

CHROME DOM INSPECTION

<svg class="svg-inline--fa fa-angle-left fa-w-6 fa-lg" aria-hidden="true" focusable="false" data-prefix="fal" data-icon="angle-left" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512" data-fa-i2svg=""><path fill="currentColor" d="M25.1 247.5l117.8-116c4.7-4.7 12.3-4.7 17 0l7.1 7.1c4.7 4.7 4.7 12.3 0 17L64.7 256l102.2 100.4c4.7 4.7 4.7 12.3 0 17l-7.1 7.1c-4.7 4.7-12.3 4.7-17 0L25 264.5c-4.6-4.7-4.6-12.3.1-17z"></path></svg>
<!-- <i class="fal fa-lg fa-angle-left"></i> Font Awesome fontawesome.com -->

TYPESCRIPT FILE EXCERPTS -- IMPORTS AND INITIALIZATION

import { library, dom } from '@fortawesome/fontawesome-svg-core';
import { faInfoCircle, faAngleLeft, faAngleRight } from '@fortawesome/pro-light-svg-icons';

...

library.add(faInfoCircle, faAngleLeft, faAngleRight);
dom.watch();

// below is an alternate attempt using i2svg function. Again, doesn't work in IE11, but does in Chrome and Firefox
// (long timeout out of desperation)

// setTimeout( ()=> {
//  fontawesome.dom.i2svg().then(() => {
//    fontawesome.dom.watch();
//  });
// }, 2000);

HTML

Tried with and without <meta http-equiv="X-UA-Compatible" content="IE=edge"/> as first meta tag. Didn't make any difference.

We code the icons in HTML like this: <i class="fal fa-lg fa-angle-left"></i>

CONCLUSION

Really want to implement this FontAwesome SVG Core method, as it allows us to use tree-shaking / webpack, avoids import of unnecessary icons, and eliminates the need for font files.

Could not find anything in the FontAwesome documentation stating that using this method is unsupported in IE11. Any help / insight would be greatly appreciated!

font-awesome-5 font-awesome
1 Answers

Specifying the proper font-weight seems key to have some of the symbols displayed properly (and not "□□□" instead).

font-weight has to be:

400 for Regular and Brands symbols 900 for Solid symbols 300 for Light symbols I.e. if you use Font-Awesome with CSS + Webfonts, a CSS-only solution is:

 @import url("font-awesome/css/fontawesome-all.min.css"); /* FA CSS import */

/* ... */

    .class:before {
        /* >> Symbol you want to use: */
        content: "\f16c";
        /* >> Name of the FA free font (mandatory), e.g.:
                   - 'Font Awesome 5 Free' for Regular and Solid symbols;
                   - 'Font Awesome 5 Pro' for Regular and Solid symbols (Professional License);
                   - 'Font Awesome 5 Brand' for Brands symbols. */
        font-family: 'Font Awesome 5 Free';
        /* >> Weight of the font (mandatory):
                   - 400 for Regular and Brands symbols;
                   - 900 for Solid symbols;
                   - 300 for Light symbols. */
        font-weight: 900;
    
        /* >> Optional styling: */
        display: inline-block;
        /* ... */
    }
user_102480590
Related