关于 iconfont 在pc上面部分浏览器中显示问题

最新推荐文章于 2024-05-23 08:45:42 发布
最新推荐文章于 2024-05-23 08:45:42 发布
阅读量1.2w 收藏 1
点赞数
分类专栏： web前端html web前端css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013224660/article/details/79272060
版权

icon font 字体图标库的问题

作为前端自定义字体图标库相信大部分人已经使用过了，列举下面一些个问题

  • 自定义图标的时候尺寸控制
  • 导出的图标在其他浏览器上面的尺寸不同
尺寸在倒入的时候自行控制，这个就不必多说了，耐心操作
主要说快速处理导出的时候在其他浏览器上面的问题

先说明一下当前的问题场景，入下图所示
这里写图片描述
chrome浏览器与主流的高级浏览器基本都是支持的，不存在什么问题，看下图
这里写图片描述

最低0.47元/天 解锁文章
小肥喵大人
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
3步在小程序中使用iconfont.md
03-29
从iconfont中下载iconfont源文件 http://iconfont.cn/ (此图片来源于网络，如有侵权，请联系删除! ) 我们加几个图标字体. 单色的. 多色的.,最后得到的图标 (此图片来源于网络，如有侵权，请联系删除! ) 将iconfont...
在vue项目中正确使用iconfont的方法
10-17
今天小编就为大家分享一篇在vue项目中正确使用iconfont的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决iconfont 图标不显示问题
热门推荐
ppx_mqj的博客
09-05 4万+
刚开始用icon font图标库不是很熟悉，踩了一些坑，希望分享出来能给新手们带来一些帮助 从官网上下载图标至本地后，放到项目里面要注意一下两点： 1、路径问题 找到iconfont.css这个文件并打开它，你会看到它里面的路径是这样的 报错了，原因是我在项目里面存放路径是这样的 所以这个时候你只需要将路径改成你项目结构中的路径即可，修改后： 2、路径配置好后怎样把你下载的图标引入到代码中 ...
使用iconfont中图标后，大小显示不一致
唐璜Taro的博客
03-19 3535
使用iconfont 中的图标，但是引入看到效果之后，但是各自显示各自的大小，为啥会出现这样的情况？
在线预览本地字体图标（ttf、woff、otf）
最新发布
徐同保的专栏
05-23 477
在线预览本地字体图标（ttf、woff、otf）
iconfont图标冲突（项目中存在多个icon图标库，写的icon图标展示的是另外一个图标）
Yi_qian的博客
06-30 1530
vu项目中iconfont图标冲突（项目中存在多个icon图标库，写的icon图标展示的是另外一个图标）
iconfont图标不显示的解决方式
m0_57342122的博客
04-18 989
iconfont图标不显示的解决方式
uniapp使用iconfonts图标不显示以及颜色问题
Mitin_的博客
08-16 8066
1，首先到iconfont官网中找到我的项目，然后点击查看在线连接，点击打开css文件，复制其中的src路径，粘贴到项目的对应的css文件下，然后加上https即可。在uniapp中使用阿里的iconfont图标遇到了图标无法显示出来的问题，复制完之后粘贴到本地的对应的iconfont.css文件中。颜色的话也可以在iconfont.css文件中设置 ，如下。在iconfont.css文件中，修改为以下这样的路径。以及图标显示了但是为一个小正方形的问题，同时包括图标颜色不显示的问题。...
详解CSS中iconfont的使用
09-24
- **渲染问题**：由于浏览器的抗锯齿处理，图标可能在某些情况下显示不够清晰，特别是在不同操作系统之间。 - **样式影响**：图标可能会受到字体相关的CSS属性（如`font-size`、`line-height`、`word-spacing`）影响...
解决vue-cli项目webpack打包后iconfont文件路径的问题
10-18
然而，在实际的项目开发过程中，可能会遇到一些问题，比如在本例中提到的`iconfont`图标文件路径问题。 `iconfont`是一种流行的在线图标服务，允许开发者将图标作为Web字体来使用，从而实现响应式和易于维护的图标...
iconfont的一次踩坑记录：图标显示异常
cxy853480896的博客
04-23 2295
iconfont的一次踩坑记录项目场景问题描述原因分析：解决方案： 项目场景 公司某系统项目使用iconfont，图标显示异常 问题描述 UI创建提供iconfont库，前端引入并使用后发现显示的图标并非库中图标。 @font-face { font-family: ''; /* project id 2496030 */ src: url('XXXXXXXX'); src: url('XXXXXXXX') format('XXXXXXXX'), url('//at.alicdn.co
Vue项目中引入iconfont 图标库 和 图标显示成小方块的问题解决
Jackshijin的博客
10-15 3万+
这两天弄了个vue的小demo ，引入了iconfont 的图标，没想到是噩耗的开始，一直显示的是小方块，一步步排查踩坑把问题解决。 首先看看官方对项目引入iconfont 的介绍。 unicode引用 unicode是字体在网页端最原始的应用方式，特点是： 兼容性最好，支持ie6+，及所有现代浏览器。 支持按字体的方式去动态调整图标大小，颜色等等。 但是因为是字体，所以不支持多色。只...
iconfont字体图标错位问题
luoyu19940615的博客
03-24 1795
原因：加入了问题图标，至于为什么是问题图标，原因不详，反正对比两个版本的图标css文件删除多余的问题，图标错位问题就解决。 错位显示： 正常显示： ...
阿里iconfont上传svg图片空白、或展示不全的解决方案/搜索到的icon无法改变颜色解决方案
yun_master的博客
06-05 1万+
原因 造成这个问题的原因，可能是因为sketch、dx等软件在导出svg时，自动在svg上添加了一些iconfont平台无法解析的属性造成的。所以解决这个问题，要么从svg代码入手，要么就需要借助工具来完成。 解决 改代码并不是很理想的解决方式，这里我们借助iconfont官方平台推荐的图形设计软件AI来解决这个问题。 1、首先下载一个AI软件 2、然后使用AI打开通过其他设计软件导出的svg图标 3、选中整个图标，然后选择对象—扩展—选择描边（已经选择取消，重新选择）——确定 4、保存为svg svg配置
360 浏览器 不显示 bootstrap 字体图标问题
weixin_34253126的博客
06-15 378
最新在开发项目，需要引用字体图标 glyphicon，在调试的过程中，google ,firefox 正常显示，360 ，ie 等 ，不显示。排除了 1. 服务器 web mime 类型 2.项目中 css 路径问题最终 在网上找的了一个方法：chrome://flags/ 不显示字体图标问题。试着在360 浏览器中输入 次 命令，停用DirectWrite...
解决iconfont下载的图标显示的是小方框
Sara0064的博客
01-03 6868
嘿嘿，我来了，最近做vue3项目，忽然发现技术就是越学越有成就感，尤其是每次都征服一个难点的时候。最近写项目遇到iconfont粘贴线上的链接却出现的总是小方块的问题。 第一步，我们先从iconfont粘贴一个线上链接。 粘贴到项目中 将图标名称粘贴到需要的位置 结果我显示的图标是 那么怎么解决呢。 然后在我们vue3项目中public中Index.html中引入 这么做之后我们打开 binggo完成，最近在做vue3的项目，会多多写文档来避免踩坑，技术就是这样，只有你踩了足够多的坑，才能更加
vue项目中引入iconfont及引入图标后显示方块问题
Kotoba209_的博客
08-16 6397
先进官网iconfont找到想要添加的图标，然后点击添加到购物车。 2. 点击添加到项目，如暂未存在项目则点击添加至项目后可新建项目（iconfont需登录） 3. 选择Symbol然后点击下载至本地 4. 解压后，不需要前两项，剩余的在项目中新建一个iconfont文件夹并把这些文件添加到文件夹中 5. 在入口文件main.js中引入css文件 6. 在需要添加的图标的地方加上一...
在项目使用Element UI的图标时，进入页面发现图标不能全部显示
m0_52043522的博客
04-02 806
问题描述： 在vue2项目中使用Element UI的icon图标时，发现页面中使用的图标并不能完全显示。 原因分析： 在package.json文件中，查看Element UI的版本，发现版本号有点低； 解决方案： 需要卸载之前的Element UI，再安装指定版本。 卸载命令：npm uninstall element-ui 安装指定版本命令：npm install element-ui@2.15.6 --save （注意：这里的指定版本号要紧跟着element-ui，它们中间没有空格） 安装完成，
iconfont通过font class引入显示小方块bug
a1071626267的博客
09-29 1009
iconfont通过font class引入显示小方块bug
vue中使用iconfont字体图标，不显示是什么原因
07-08
如果在 Vue 中使用 Iconfont 字体图标时出现不显示的情况，可能有以下几个原因： 1. 字体文件路径不正确：确保你在项目中引入了正确的 Iconfont 字体文件，并且路径设置正确。可以在浏览器的开发者工具中检查网络...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值