iconfont 字体图标错乱
iconfont 字体图标错乱
- 问题描述
- 排查过程
- 定位问题
- 误区
- 规避方案
问题描述
- 在做项目的时候遇到一个很奇怪的问题，引入的图标和示例图标的引入方式一样，类名一样，审查元素发现连content也一样
- 唯独最后出现的效果非预期
- 表现为预期A,显示B
排查过程
- 检查现运行项目是否引入了多个图标库
- 检查现运行项目是否引入方式错误，iconfont.css,或者iconfont.js
- 检查现运行项目所有的html文件对字体图标的引用
- 检查其依赖包
定位问题
- 运行项目采用create-react-app 搭建，进入public文件夹下查看字体图标的示例html,发现能正常显示
- 缩小排查范围，存在自定义的依赖包，引用了字体图标而产生冲突
误区
- 造成图标显示错乱的未必只有当前项目，还有可能是其依赖的包 （node_modules下）
- 引入css的地方未必只有html，less,scss,js都可以
- 亲测，本次踩坑的字体图标的iconfont.css在一个全局的less文件中被引用，我…？？？
规避方案
- 一般很少遇到此类问题，但如果有自己开发的依赖包，且引用了字体图标就要小心了
- 尽可能保证运行项目和子项目图标库高度统一
iconfont 字体图标错乱相关推荐
- uniapp使用iconfont字体图标
本文介绍两种方案:一.使用iconfont字体图标 二.使用icon图片 情景1:使用灰色的字体图标 方案一:使用iconfont字体图标 步骤1:下载iconfont 步骤2:解压后只需要将ifon ...
- iconfont字体图标的使用方法
今天来谈谈iconfont字体图标的使用方法 一.打开阿里巴巴矢量图官网 阿里巴巴矢量图官网 界面如下: 二.选择登录:可以使用GitHub账号登录,用其他账号也可以这里我选择用GitHub账号登录 ...
- iconfont 字体图标
目前国内使用最多的是iconfont-阿里巴巴字体矢量图标库, 字体图标主要显示网页中通用常用的一些小图标iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标 ...
- 使用阿里巴巴图标库生成iconfont字体图标
iconfont字体图标就是用字体来代替图标.图片文件的做法,并且通过字体图标可以对图标的大小.颜色等进行控制,但是缺点就是只能实现一种颜色,不能像图片那样含有各种颜色. 通过阿里巴巴图标库制作字体图 ...
- 阿里巴巴iconfont字体图标使用方法
iconfont字体图标的使用方法--超简单! 这里讲解的默认是元素使用类名; step 1:百度iconfont,找到阿里巴巴矢量图标库官网,然后注册登录,或者用github登录也行,此步骤跳过; ...
- 微信小程序离线引入 iconfont 字体图标
由于微信小程序的限制问题,我们不会像 Web 项目那样引入阿里的字体图标库,通常采用在线生成链接的方式引入. 但阿里矢量图库在 2022年 6-7月份 进行了网站维护,维护之后,不能"生成在 ...
- 通过svg可以转换成iconfont字体图标
前些天,因为项目需求,菜单要求图标为字体图标,但是UI设计图只给了png格式,所以研究了一番,可以通过把png转换为svg格式,然后通过在一个网站上转换为iconfont字体图标,并可以打包用在实际项 ...
- 东北狼仙-织梦仿站获取网站的iconfont字体图标字体方法
好久没有仿站了突然碰到这个问题,随心所欲的就发布了一下获取网站iconfont字体图标方法 首先找到CSS文件下载打开 搜索@font-face 查找类似代码 @font-face { font-fa ...
- iconfont字体图标，ico图标设置，版心
iconfont字体图标,ico图标设置,版心 1.如何使用iconfont字体图标 IconFont,图标字体也叫字体图标,就是字体做的图标.可以通过设置字体的方式改变图标的样式,受到近些年 扁平化 ...
最新文章
- faster rcnn学习之rpn、fast rcnn数据准备说明
- [react] react中什么是受控组件？
- 正则仅输入文字字母空格，但必须含有字母
- VS的TFS版本控制的使用总结
- dedecms php5.4 无法退出后台,PHP5.4版本织梦dedecms后台退出空白的解决方法
- 让你变成优秀程序员的几个小习惯
- 3d pdf reader android,3D PDF Reader
- 低代码/无代码，在国内还有多长的路要走？
- Proteus8.6SP2仿真使用汇总
- 如何复制百度文库的文章
- 高效程序员的七个习惯
- 从零配置腾讯云cdn加速服务！
- c语言intmain作用,c语言intmain()是什么意思
- 表格识别1-使用python-opencv实现表格识别
- 认养农业菜园认租如何助力农业发展？
- 大白菜装机版一键制作启动u盘教程
- 机载导航设备自动测试系统-ETest
- 基于Javaweb实现的人脸识别考勤系统
- C#中使用设置(Settings.settings) Properties.Settings.Default .
- [python八卦] zz 一位大牛整理的Python资源