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

编程问答 2022-05-16

问题描述

总结

在 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,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-weight 必须是：

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;
        /* ... */
    }
font-awesomefont-awesome-5