文章/答案/技术大牛

发布

社区首页 >问答首页 >实现方框-svg-核心和亲光-svg-图标不显示在IE11中的图标.在Chrome和Firefox中工作

问实现方框-svg-核心和亲光-svg-图标不显示在IE11中的图标.在Chrome和Firefox中工作
EN

Stack Overflow用户

提问于 2021-03-30 16:50:25

回答 1查看 360关注 0票数 3

摘要

让FontAwesome Pro图标在IE11中显示有困难(在Chrome和火狐中它们工作得很好)。没有报告控制台错误，但对DOM的检查表明，<i>标记没有被转换为<svg>标记：

IE11 DOM检测

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

铬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);

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

我们用HTML对图标进行编码，如：<i class="fal fa-lg fa-angle-left"></i>

结论

真正想要实现这个FontAwesome SVG核心方法，因为它允许我们使用树抖动/ webpack，避免不必要的图标导入，并消除了字体文件的需要。

无法在FontAwesome文档中找到任何声明在IE11中不支持使用此方法的内容。任何帮助/洞察力都将不胜感激！

font-awesome

font-awesome-5

回答 1

Stack Overflow用户

发布于 2021-04-09 15:08:15

指定适当的字体大小似乎是正确显示某些符号的关键(而不是“--”而不是“--”)。

字体的重量必须是：

400个常规符号和900个品牌符号用于实体符号300个表示光符号，也就是说，如果您使用字体-如果您使用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;
        /* ... */
    }

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66875127

复制

相似问题

问实现方框-svg-核心和亲光-svg-图标不显示在IE11中的图标.在Chrome和Firefox中工作
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问实现方框-svg-核心和亲光-svg-图标不显示在IE11中的图标.在Chrome和Firefox中工作EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问实现方框-svg-核心和亲光-svg-图标不显示在IE11中的图标.在Chrome和Firefox中工作
EN