iconfont 字体图标
目前国内使用最多的是iconfont-阿里巴巴字体矢量图标库, 字体图标主要显示网页中通用常用的一些小图标iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具
精灵图虽然有诸多优点,但是缺点还是很明显:
1.图片文件还是比较大的
2.图片本身放大和缩小会失真
3.一旦图片制作完毕想要更换非常复杂
此时有一种技术的出现很好的解决了以上问题,就是字体图标iconfont.
字体图标的优点
1.轻量 (比图像小,减少服务器请求)
2.灵活性 (本质是文字,可以改变颜色、阴影、透明 旋转 字体大小等等)
3.兼容性好:几乎支持所有浏览器
注意! 字体图标不能代替精灵图
使用场景
字体图标: 结构样式简单的小图标
精灵图: 复杂的小图片
字体图标的引用方法
方法一:本地下载
1. 进入阿里巴巴字体矢量图标库,搜索自己想要的字体图标,加入购物车
2.将购物车里的字体图标添加到项目
3.找到自己的项目,点击下载至本地
4.将压缩包解压出来,复制其中四个文件到自己项目的根目录:
5.引入iconfont.css
6.给标签添加一个iconfont类名以及一个相应图标的类名
点击 Font class 在相应图标下点击复制代码即可获得相应图标的类名
方法二:线上模式
1.还是找到想要的图标添加至项目
2.点击Font class, 点击查看在线链接,然后点击生成在线链接,然后点击复制代码
3.引入在线链接
注意! 链接前一定要写http: 不然字体图标可能不会生效
4.还是一样添加两个类名即可(一个iconfont类名, 一个相应图标的icon-xxx类名)
方法三:unicode编码格式
1.可以使用在线链接及下载至本地的iconfont.css
2.添加一个类名iconfont ,并在标签里写入相应图标的Unicode编码
Unicode编码可在自己的字体图标库的项目中点击Unicode查看,一样复制相应图标的Unicode编码
方法四: 使用伪元素生成字体图标
1.查看iconfont.css文件,找到相应的图标
2.将相应编码输入到要用的伪元素的content""中即可
以上就是字体图标和精灵图之间的差别 使用环境, 以及字体图标的四种使用方法的介绍
iconfont 字体图标相关推荐
- uniapp使用iconfont字体图标
本文介绍两种方案:一.使用iconfont字体图标 二.使用icon图片 情景1:使用灰色的字体图标 方案一:使用iconfont字体图标 步骤1:下载iconfont 步骤2:解压后只需要将ifon ...
- iconfont字体图标的使用方法
今天来谈谈iconfont字体图标的使用方法 一.打开阿里巴巴矢量图官网 阿里巴巴矢量图官网 界面如下: 二.选择登录:可以使用GitHub账号登录,用其他账号也可以这里我选择用GitHub账号登录 ...
- 使用阿里巴巴图标库生成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,图标字体也叫字体图标,就是字体做的图标.可以通过设置字体的方式改变图标的样式,受到近些年 扁平化 ...
- vue-cli打包apk iconfont字体图标 不显示问题
vue移动端项目打包apk,发现iconfont字体图标不显示,第一反应是引用的文件路径不对: 在网上查找资料后,解决方法: 找到build>utils.js文件,如图所示位置加上publicP ...
最新文章
- java切面类整合_SpringBoot2.x【五】整合AOP切面编程
- Xamarin XAML语言教程使用Xamarin Studio创建XAML(二)
- BZOJ 1443: [JSOI2009]游戏Game
- 关于python语言和人工智能哪个说法不正确_在 Windows 7 操作系统中，下列说法错误的是（ ）。_计算机文化基础答案_学小易找答案...
- 经典冒泡排序及其优化
- php不发送referer,php – 注意：未定义的索引：HTTP_REFERER
- Java线程池有哪些作用
- php用到的mysql语句_PHP中常用到的一些MySQL语句_php
- SAP License：SAP ECC6安装系列五：安装后 License 的处理
- Ioc模式(又称DI：Dependency Injection 依赖注射)
- java 流已被关闭_mybatis oracle java.sql.SQLException: 流已被关闭问题
- 十一、Shell脚本流程控制语句
- 斐讯盒子刷android tv,【TV】斐讯盒子T1_YYFROM语音助手实用版(191129)
- selenium--下载与安装
- 【银联支付】php接入银联支付
- 使用WebService获取第三方服务数据
- Golang工程师历年企业笔试真题汇总
- 2018蓝桥杯模拟赛（一）--青出于蓝而胜于蓝（线段树）
- malloc，calloc区别
- 基于嵌入式技术的智能灌溉系统设计与实现