首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

SVG中的字体图标在IE 11中不起作用

是因为IE 11不支持SVG字体图标的渲染。SVG字体图标是一种使用矢量图形来表示图标的方法,它使用字体文件来定义图标的形状,并通过CSS样式来控制图标的大小、颜色等属性。

在IE 11中,可以通过以下几种方法来解决SVG字体图标不起作用的问题:

  1. 使用SVG图像替代字体图标:将SVG字体图标转换为独立的SVG图像文件,并使用<img>标签或CSS的background-image属性来引用和显示图标。这种方法可以确保在IE 11中正常显示SVG图像。
  2. 使用SVG Sprites:将所有的SVG图标合并到一个SVG文件中,然后使用<symbol>标签定义每个图标,并使用<use>标签在需要的地方引用图标。这种方法可以减少HTTP请求,提高性能,并且在IE 11中也能正常显示。
  3. 使用Polyfill库:使用一些Polyfill库,如svg4everybody或svgxuse,可以在IE 11中实现对SVG字体图标的支持。这些库会自动检测页面中的SVG图标,并使用JavaScript动态地将其替换为可支持的格式。

总结起来,解决SVG字体图标在IE 11中不起作用的方法包括使用独立的SVG图像、SVG Sprites或Polyfill库。具体选择哪种方法取决于项目需求和开发团队的偏好。

腾讯云相关产品中,可以使用腾讯云对象存储(COS)来存储SVG图像文件,通过腾讯云CDN加速来提供图像的访问速度。腾讯云CDN产品链接地址:https://cloud.tencent.com/product/cdn

请注意,本答案仅供参考,具体解决方法还需要根据实际情况进行调试和验证。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【Flutter】Icons 组件 ( FlutterIcon 下载图标 | 自定义 svg 图标生成 ttf 字体文件 | 使用下载 ttf 图标文件 )

文章目录 一、FlutterIcon 下载图标 二、自定义 svg 图标生成 ttf 字体文件 三、使用下载 ttf 图标文件 四、完整代码示例 五、相关资源 一、FlutterIcon 下载图标 -..., 后面一串是随机生成数字 ; 该压缩包主要有三个文件 , ① ttf 字体文件 : MyFlutterApp.ttf , svg 格式图标就封装在该文件 ; ② dart 文件 : Flutter...图标生成 ttf 字体文件 ---- https://www.fluttericon.com/ , 将 SVG 格式图标拖动到该地址页面的 Custom Icons 区域 , 拖动过程 :...ttf 图标文件 ---- 将 MyFlutterApp.ttf 字体文件拷贝到 Flutter 源码根目录下 fonts 目录下 , pubspec.yaml 配置文件配置字体文件 , name...: 图标绘制方向 , 是否按照 svg 文件方向绘制 ; 代码中使用 IconData 加载自定义图标 , 3D图标对应编码是 0xe855 ; Center( // 加载自定义图标

2.3K20

Vue3使用各类字体图标的正确姿势:本地SVG、Iconfont、FontAwesome、ElementPlus(图标选择器篇)

前言最近,项目的开发,我们规划了一个 Icon 组件,我们希望通过这个组件,能直接同时使用多种图标图标(一种语法,实现无限图标扩展和高度兼容性)并且,实现该 Icon 之后,理应还有一个图标选择器...,可以加载出不同图标所有可用图标,方便直接选择使用,完整代码文末提供。...Iconfont(阿里巴巴矢量图标库),实现了自动载入Font clas(css链接,载入后即可通过class来使用对应字体图标),实现Icon组件语法兼容性,然后自动解析出Font class内所有图标名称...获取本地图标名称列表实现Icon组件时,我们已经导入了所有的本地SVG文件内容到项目内,导入后,页面加入svg元素类似这样:可以看到,我们已经使用data-icon-name属性,将所有的图标名称记录了下来...,现在只需获取该属性值再进行简单处理即可,我们/src/utils/iconfont.ts文件,定义了获取本地图标名称列表函数:export function getLocalIconfontNames

2.1K20

Reactstyled-components基础上使用iconfont字体图标

styled-components官网 巧妇难为无米之炊,先准备米: 从iconfont官网选取图标 添加购物车 购物车添加项目 项目中生成代码 下载代码包到本地 这套流程应该娴熟到不用看上边文案...重点来了, 怎么style-components中使用iconfont: 提取下载字体文件到项目的src>assets>fonts文件夹(当然可以根据你项目决定其他路径) ?...提取iconfont.css代码到全局style.js文件GlobalStyledcreateGlobalStyle``,用于全局通用。...36 ` 踩坑: 代码,第33行这种地方,是需要修改原来iconfont.css代码。...这里因为createGlobalStyle``里边是js字符串,所以字体图标的类似 .icon-sousuo:before {   content: "\e639"; } 得将"\"转义下,改成 .

3.6K30

04-移动端开发教程-在线字体

IE4开始微软就已经开始支持在线字体,不过没有流行起来,直到CSS3新增加了font-face模块,正式纳入了web开发标准。也渐渐流行起来而且发掘了很多其他应用。 1....低质量位图高清设备上放大后会有难看锯齿,无法满足响应式页面的开发需求 在线字体带来革命: 在线字体本质就是文字,但是也可是像图形文字。...在线字体 @font-face是CSS3一个模块,他主要是把自己定义Web字体嵌入到你网页,允许我们不依赖操作系统字体,做到全平台字体统一和定制。...【IE4+】; SVG(.svg)格式: .svg字体是基于SVG字体渲染一种格式,支持这种字体浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2...这就意味着@font-face我们至少需要.woff,.eot两种格式字体,甚至还需要.svg字体达到更多种浏览版本支持。 4.

3.2K60

04-移动端开发教程-在线字体图标

IE4开始微软就已经开始支持在线字体,不过没有流行起来,直到CSS3新增加了font-face模块,正式纳入了web开发标准。也渐渐流行起来而且发掘了很多其他应用。 1....低质量位图高清设备上放大后会有难看锯齿,无法满足响应式页面的开发需求 在线字体带来革命: 在线字体本质就是文字,但是也可是像图形文字。...在线字体 @font-face是CSS3一个模块,他主要是把自己定义Web字体嵌入到你网页,允许我们不依赖操作系统字体,做到全平台字体统一和定制。...【IE4+】; SVG(.svg)格式: .svg字体是基于SVG字体渲染一种格式,支持这种字体浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2...这就意味着@font-face我们至少需要.woff,.eot两种格式字体,甚至还需要.svg字体达到更多种浏览版本支持。 4.

3.2K60

第104天:web字体图标使用方法

第四步:使用方法 1、Unicode方式 Unicode是字体在网页端最原始应用方式,特点是: 兼容性最好,支持ie6+,及所有现代浏览器 支持按字体方式去动态调整图标大小,颜色等等 不支持多色...只能使用平台里单色图标,就算项目里有多色图标也会自动去色   注意:新版iconfont支持多色图标,这些多色图标Unicode模式下将不能使用,如果有需求建议使用Symbol引用方式   使用步骤如下...--"iconfont"是你项目下font-family,默认是"iconfont"--> 3是字体编码,可在下载demo.html查看,或者可以阿里矢量图标网站上,进入我项目查看...--"iconfont"是你项目下font-family,默认是"iconfont"--> icon-xxx是使用了unicode引用类名,可在下载demo.html查看,或者可以阿里矢量图标网站上...【第三步】: 解压下载字体图标包,拷贝ie7和font两个文件夹到你站点里面去。

1.4K10

高清ICON SVG解决方案(上) - 腾讯ISUX

正因为如此这个技术推进过程遇到许多困难,因为很多场景下图标确实会较小甚至小于16px,而且有些16px图标如果复杂度较高,iconfont实现出来icon会经常出现看不清情况,而且国内PC用户是占最多...接下来我们来看看使用iconfont和使用SVG做出来图标有什么差异: Chrome下效果 ? FF下效果 ? IE9下效果 ?...上面的demo分别在不同浏览器下效果,第一行用是iconfont实现,下面三行都是用SVG实现图标,只是调用SVG方法不同:第一行是用inline SVG,将SVG直接写在html来使用,...从Chrome和FF下显示效果,我们看到SVGICON质量确实是比iconfont要好,iconfont做图标,我截图后放大后看到线边缘发虚了,这是因为字体渲染原因导致,FF下也是发虚,...IE9+下效果上我们看到IESVG支持性着实差令人无法直视,IE10,IE11效果和IE9几乎一样(真的是坑爹)。

3.2K40

图标字体应用实践

然而在实际操作并没有像上面说那么顺利,会遇到很多阻碍,笔者也是摸索了很久才总结了一套实用经验,这也是其它介绍图标字体教程没有提及到,看其它很多教程可能会在实际使用遇到很多坑。...坑1:图标字体只支持单路径 通常情况下,设计师制作图标的时候是用多个路径组合出来,在上面的导出svg也是带有多个路径,打开svg文件就可以知道,它是由几个path组成: ?...图标字体两种使用方法 其中,e9d3是当前图标在这个字体里面的十六进制编码。普通字体里,0编码是0x16,即48,为0ascii编码。...使用过程遇到坑: 1. webkit浏览器会在加缘加粗1个像素 如下,读者可找下区别: ?...如果实再是要使用多色图标,甚至带一些特殊效果那就使用SVG吧。 结合使用SVG 对于多色图标,可以页面插入一个SVG: ?

2.3K20

Iconfont在教育平台实践

svg雪碧图只兼容IE9+,而平台仍需要支持IE8用户,为了避免矢量图和位图两套方案,选择了兼容性更好iconfont,可以完美兼容到IE6。...市面上已经有很多iconfont平台,上传svg转化为字体文件,可下载查看demo,copy样式到代码,但是存在几个问题: content不固定,当修改或删除某些icon时,所有content值改变...遇到一些问题 svg图标绘制 虽然目前线上有很多这种图标,但是为了我们平台图标统一性和可沉淀,我们选择了自己绘制图标。...选择绘制图标大小上有了几次尝试,因为图标大多数是12px/16px/24px/32px/48px,最后我们经过多次测试确认绘制svg大小为480px,左右留白30px这个标准 字体跨域问题 这个是遇到最简单一个问题...遗留问题 IE8,如果字体文件加载失败,则整个页面空白,虽然其他资源正常加载,逻辑正常运行。 iOS、Andriod字体文件或阻碍其他资源下载。

1.2K20

认识 Iconfont 以及什么是 .eot、.woff、.ttf、.svg「建议收藏」

大家好,又见面了,我是你们朋友全栈君。 一、Iconfont 1. 概述 在前端作业,二十年前只有页面中铺满文字就算上线产品,现如今,不加点俏皮图标”会让页面显得很 Low 很 Low。...图标 写这篇文章之前,我一直以为上图中图标”是一个个图片组成,但学习总是给人新知,现在我知道了它们只是一种字体,类似于“宋体”、“楷体”这种。...概述 阿里图标库中下载图标到本地后,目录结构如下: 图标库下载到本地目录结构 第一次看到这几个文件时,不知道有什么用,可能会直接删除,但万万不可,打开 iconfont.css 文件可以 @font-face...【支持浏览器:IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】 SVG / SVGZ Scalable Vector Graphics (Font)....这种格式只IE6-IE8里使用。【支持浏览器:IE4+】 OTF / TTF OpenType Font 和 TrueType Font。

3K10

Iconfont在教育平台实践

svg雪碧图只兼容IE9+,而平台仍需要支持IE8用户,为了避免矢量图和位图两套方案,选择了兼容性更好iconfont,可以完美兼容到IE6。...市面上已经有很多iconfont平台,上传svg转化为字体文件,可下载查看demo,copy样式到代码,但是存在几个问题: content不固定,当修改或删除某些icon时,所有content值改变...遇到一些问题 svg图标绘制 虽然目前线上有很多这种图标,但是为了我们平台图标统一性和可沉淀,我们选择了自己绘制图标。...选择绘制图标大小上有了几次尝试,因为图标大多数是12px/16px/24px/32px/48px,最后我们经过多次测试确认绘制svg大小为480px,左右留白30px这个标准 字体跨域问题 这个是遇到最简单一个问题...遗留问题 IE8,如果字体文件加载失败,则整个页面空白,虽然其他资源正常加载,逻辑正常运行。 iOS、Andriod字体文件或阻碍其他资源下载。

1.5K70

iconfont使用方法

,解压即可得到需要文件 有三种方法使用 (1)unicode引用 unicode是字体在网页端最原始应用方式,特点是: 兼容性最好,支持ie6+,及所有现代浏览器。...支持按字体方式去动态调整图标大小,颜色等等。 但是因为是字体,所以不支持多色。只能使用平台里单色图标,就算项目里有多色图标也会自动去色。...注意:新版iconfont支持多色图标,这些多色图标unicode模式下将不能使用,如果有需求建议使用symbol引用方式 使用步骤如下: 第一步:拷贝项目下面生成font-face(注意路径)...这种用法其实是做了一个svg集合,与另外两种相比具有如下特点: 支持多色图标了,不再受单色限制。 通过一些技巧,支持像字体那样,通过font-size,color来调整样式。...兼容性较差,支持 ie9+,及现代浏览器。 浏览器渲染svg性能一般,还不如png。 使用步骤如下: 第一步:引入项目下面生成symbol代码: <script src=".

93320

从零开始学 Web 之 CSS3(六)动画animation,Web字体

moveTest; animation-duration: 2s; 如需 CSS3 创建动画,需要学习 @keyframes 规则。... @keyframes 规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式动画效果。 使用 @keyframes关键字来创建动画。...二、Web字体图标 1、web字体 我们有些时候需要在网页上显示一些特殊字体,如果这些特殊字体电脑上没有安装的话,就会显示系统默认字体,而不是这些特殊字体。 这时就有了 Web 字体。...+; Embedded Open Type(.eot)格式 .eot字体IE专用字体,可以从TrueType创建此格式字体,支持这种字体浏览器有IE4+; SVG(.svg)格式 .svg字体是基于...SVG字体渲染一种格式,支持这种字体浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+ 3、使用步骤 需要注意是,我们使用 Web

1.4K10

字体图标iconfont

前端开发离不开图标,会有一部分直接使用图片引进,但是性能上来说对用户体验不是很好。...字体图标:以字体文件形式封装,并通过 CSS @font-face 作为 Web Font 调用,达到简单图片效果。 优点: 1、 轻量性,加载速度快,因为字体图标都非常小。...2、 矢量性,不管什么分辨率和端下,都有很好展示效果。 3、 灵活性,各种css效果前端控制,不需要UI修改。 4、 兼容性,支持所有现代浏览器,包括IE低版本。...字体图标使用不同公司项目要自己判断,这边推荐使用阿里字体图标: http://iconfont.cn/home/index 搜索需要图标: ? 把想要图标选中: ? 点击右上角: ?...Symbol:支持多色图标了,不再受单色限制,兼容性较差,支持 ie9+,及现代浏览器。 浏览器渲染svg性能一般,还不如png。

2.4K10

【网页前端】CSS样式表进阶之图像灵活使用与拓展知识

字体图标:引入第三方特殊字体,以特殊字体显示为图片图标。 注:因为计算机字体本质就是图片,所以又称为图标字体。 优点: 1 、轻量级:字体加载速度极快。...1 、登陆 阿里字体图标库,搜索你需要字体: http://www.iconfont.cn 2 、例如搜索:“Java ” 3、把需要图标添加到购物车 4、选择过各种图标后,点击购物车...、 Opera11.1+; Embedded Open Type( .eot ) 格式 .eot 字体IE 专用字体,支持这种字体浏览器有 IE4+; SVG(....svg ) 格式 .svg 字体是基于 SVG 字体渲染一种格式,支持这种字体浏览器有 Chrome4+ 、 Safari3.1+ 、 Opera10.0+ 、 iOS...为例,根据网页提示,找到使用关键代码 4、idea ,html 引入 CSS 样式,并复制关键代码 5、查询图标对应 Unicode 码,修改 span 转义字符值。

1.5K40

修改表单元素placeholder属性样式、清除IE浏览器input元素清除图标和眼睛图标

一、修改input元素placeholder属性样式 在做项目的时候,一般表单元素placeholder属性样式都是使用浏览器默认,但有时候为了追求设计上美感需要修表单元素placeholder...webkit-input-placeholder{ color:red; } /*Firefox*/ ::-moz-placeholder{ color:red; } /*IE...、Edge等 Trident 内核浏览器*/ :-ms-input-placeholder{ color:red; } 二、清除IE浏览器input元素删除和查看密码图标 IE、Edge等...Trident 内核浏览器,type = “text” input元素中有输入时会出现清除图标,type = “password” input元素中有输入时会出现眼睛图标。...添加下面的样式可以去除默认图标: ::-ms-clear, ::-ms-reveal{ display: none; }

1.7K20

字体图标iconfont使用

1.将从阿里矢量图标图标并下载到本地 2.使用图标(三种使用方式) 1.使用 FontClass(最简单方式,支持字体样式定义但不支持多色字体) fontClass 支持字体样式定义,但不支持多色字体...) 支持字体样式定义,但不支持多色字体,兼容性最好,支持 IE6+,及所有现代浏览器。...兼容性较差,支持 IE9+,及现代浏览器。浏览器渲染 SVG 性能一般,还不如 png。 第一步:引入项目下面生成 symbol 代码: } 注意:iconfont 图标 symbol 引用方式,有的图标不能通过设置 color 样式来修改颜色解决办法 原因: 当从阿里图库图标被添加至项目,如果编辑过项目图标的颜色或者图标本身是有颜色...,那么通过 symbol 获取图标时会在 svg path 增加 fill 属性,导致无法更改颜色,如果需要动态修改颜色,需要从新添加该图标(本身图标无色),获取 symbol js 文件中程序删除

4K20
领券