今天来谈谈iconfont字体图标的使用方法
一、打开阿里巴巴矢量图官网
界面如下：
二、选择登录：可以使用GitHub账号登录，用其他账号也可以这里我选择用GitHub账号登录
三、搜索自己想要的图标：这里我输入的是购物车，显示结果如下：
四、找到自己想要的图标，点击加入库
五、点击购物车图标
六、创建项目，当然也可以不创建，怎么方便怎么来嘛
七、这里选择Unicode，点击下载本地
八、将下载好的字体图标的压缩包解压，放到CSS文件夹中
九、在HTML中引入iconfont.css文件
十、Unicode 引用
Unicode 是字体在网页端最原始的应用方式，特点是：
兼容性最好，支持 IE6+，及所有现代浏览器。
支持按字体的方式去动态调整图标大小，颜色等等。
但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
Unicode 使用步骤如下：
（一）第一步：拷贝项目下面生成的 @font-face
（二）第二步：定义使用 iconfont 的样式
（三）第三步：挑选相应图标并获取字体编码，应用于页面
十一、练习
我想要的效果是：鼠标悬停时字体图标放大，废话少说，先上效果图
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="CSS/font/iconfont.css"> <style> .iconfont:hover { color: red; font-size: 100px; } </style> </head> <body> <span class="iconfont"></span> <span class="iconfont"></span> </body> </html>
看完之后你学会了吗？如果没有，请私信我，我手把手教你如何使用字体图标。
本期结束，我们下期再见！
