前端小白进阶路
页面对于小图标的需求 除了精灵图片可以满足后也可以引用阿里巴巴的矢量图标库
而且引用图标库感觉效率更高 而且可以让设计师偷懒哈哈
下面开始介绍教程,其实网上已经很多 但是感觉有一些细节并没有解释清楚
本文将详细介绍ICONFONT的UNICODE和SYMBOL引用
1. 在http://www.iconfont.cn/ 搜索自己想要的图标,添加到购物车
2.将选好的icon添加到自己的项目中
现在iconfont有三种引用方式 unicode、symbol、fontclass
点击你要选择的引用方式下载本地
3.当你下载到电脑后,打开的文件夹是这样的,其中三个html文件就是分别对应三种引用方式的教程
不过有些细节没有详细说到,所以本文介绍unicode和symbol两种引用方式
1.首先介绍unicode
PS:unicode引用不支持多色图标,unicode引用类似于字体的引用,所以可以改变图标的颜色
1.1 在style.css文件中引入
注意:这里只是教程中的例子路径,要修改成自己相对应的路径(其实就和引入img或者是.css文件一样)
1.2自定义图标的样式
这里的font-family的值与@font-face里的font-family是一样的
font-style:normal 是让图标垂直
其他的样式可以自定义 类似于定义字体
font-size定义大小
color可以改变图标颜色 (symbol引用好像不可以改变 只可以改变背景色)
1.3
编码要换成自己选择图标的编码
在iconfont网站上可以看到
symbol引用
2.1在html文件引用iconfont.js文件
2.2定义样式 和unico定义类名一样
3.挑选类名 在html文件书写下面的代码块
注意svg的类名必须和.css定义的类名一致
href=“#icon-xxx”是图标的名字
同样,在iconfont网站可以找到
UNICODE引用虽然不支持多色 但可以改变图标的颜色
SYMBOL引用可以引用多色的图标但是不能改变字体颜色哦