阿里巴巴矢量图标库项目中使用svg格式字体图标 3种使用方式
2019-06-16 18:13
411 查看
iconfont 介绍
a. 意义:使用字体用 HTML 代码以文本的形式直接在网页中画 icon 小图标。
b. 为什么使用 icon 字体图标: 使用图标字体可大大减少图标维护工作量。
c. 灵活性:轻松地改变图标的颜色或其他 CSS 效果。
d. 可扩展性:改变图标的大小,就像改变字体大小一样容易。
e. 矢量性:图标是矢量的,与像素无关。缩放图标不会影响清晰度。
f. 兼容性:字体图标支持所有现代浏览器(包括糟糕的 IE6)。
g. 本地使用:通过添加定制字体到你的本地系统,你可以在各种不同的设计和编辑应
用程序中使用它们。
2) iconfont 使用(本地没有 svg)
a. 我们需要依赖网站制作,
b. 目前国内用的最多的是阿里巴巴矢量库(http://www.iconfont.cn/)
- 注册账户
- 把你想要的图标添加入库(购物车
- 点击购物车,将你想要的图标添加到项
- 下载到本地使用
- 三种使用方式
- unicode 引用
- symbol 引用
- font-class 引用
- iconfont 使用(本地有 svg)
a. 图标字体: 使用 IcoMoon 将 SVG 格式的图标转换生成图标字体及样式
b. 进入 icoMoon 官网: https://icomoon.io/
c. 点击右上角 , 进入处理页面
d. 点击左上角 , 选择 resource\SVG*.svg, 上传显示到页面
e. 在页面选择所有 svg, 点击右下角 生成图标字体样式
f. 点击左上角 指定 Font-Name 为 sell-icon, 点击右下角 下
载到本地
g. 解压 zip 包, 访问 demo.html 测试
h. 我们项目需要的是 fonts 和 style.css - 在页面中引入在线的 iconfont 样式
相关文章推荐
- vue项目使用阿里巴巴矢量图标库教程
- 如何在项目中使用阿里巴巴Iconfont图标字体
- iconfont使用的三种方式(阿里巴巴矢量图标库代码使用)
- WPF使用矢量字体图标(阿里巴巴iconfont)
- 微信小程序中如何使用阿里巴巴矢量图标库的iconfont字体图标?
- 前端必备之阿里巴巴矢量图标库iconFont字体图标的使用
- 矢量图标,图标字体的使用,font awesome
- 使用阿里巴巴图标库生成iconfont字体图标
- Android 开发中 阿里巴巴矢量图标库 IconFont的使用详解
- Ionic使用Iconfont-阿里巴巴矢量图标库
- 微信小程序使用阿里巴巴的矢量图标iconfont
- 新版Iconfont-阿里巴巴矢量图标库支持三种引用方式
- 使用阿里巴巴矢量图标库下载所需的小图标
- 阿里巴巴矢量项目图标制作流程
- 项目开发必备:Iconfont-阿里巴巴矢量图标库
- 如何使用阿里巴巴字体图标库
- 微信小程序中使用阿里矢量字体图标
- 如何使用阿里巴巴字体图标库
- 简单介绍一下阿里巴巴矢量图标库的使用
- 使用网络字体作为矢量图标