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

【问题标题】：Implementation of fontawesome-svg-core and pro-light-svg-icons does not show icons in IE11. Works in Chrome and Firefoxfontawesome-svg-core 和 pro-light-svg-icons 的实现在 IE11 中不显示图标。适用于 Chrome 和 Firefox
【发布时间】：2021-06-26 17:12:36
【问题描述】：

摘要

无法在 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 -->

打字稿文件摘录 -- 导入和初始化

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 不支持使用此方法的内容。任何帮助/见解将不胜感激！

【问题讨论】：

标签： font-awesome font-awesome-5

【解决方案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;
        /* ... */
    }

【讨论】：