font-awesome - fontawesome-svg-core 和 pro-light-svg-icons 的实现在 IE11 中不显示图标。适用于 Chrome 和 Firefox

Question

总结

在 IE11 中显示 FontAwesome Pro 图标时遇到问题(它们在 Chrome 和 Firefox 中工作正常)。没有报告控制台错误，但检查 DOM 显示 <i>标签未转换为 <svg>标签:

IE11 DOM 检查

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

Chrome DOM 检查

<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 文件摘录 -- 导入和初始化

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

尝试使用和不使用 <meta http-equiv="X-UA-Compatible" content="IE=edge"/>作为第一个元标记。没有任何区别。

我们用 HTML 编写图标代码如下: <i class="fal fa-lg fa-angle-left"></i>

结论

真的很想实现这个 FontAwesome SVG Core 方法，因为它允许我们使用 tree-shaking/webpack，避免导入不必要的图标，并消除对字体文件的需要。

在 FontAwesome 文档中找不到任何说明 IE11 不支持使用此方法的内容。任何帮助/见解将不胜感激!

Answer 1

指定正确的字体粗细似乎是正确显示某些符号的关键(而不是“□□□”)。

字体粗细必须是:

400 用于常规和品牌符号900 实心符号300 个灯符号IE。如果您将 Font-Awesome 与 CSS + Webfonts 结合使用，则纯 CSS 解决方案是:

 @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;
        /* ... */
    }