前端——移动web开发1

#博学谷IT学习技术支持#

1.字体图标

字体图标展示的是图标，本质是字体，可以用来处理颜色单一的图片，比如下图中蓝色框里的图标，都是用的字体图标，因为其本质是字体，所以可以使用文本的相关样式，比如修改字体大小，字体颜色的属性，字体图标也能生效，下图中的位置，购物车均是红色，这就是使用颜色属性修改的，字体图标的默认颜色都是黑色：

 字体图标的优点：

灵活性：灵活的修改样式，例如：尺寸，颜色等

轻量级：体积小、渲染快、降低服务器请求次数

兼容性：几乎兼容所有主流浏览器

使用方便：

1.下载字体图标

可以从这里下载Iconfont：https://www.iconfont.cn/

登录（新浪微博）→ 选择图标库 → 选择图标，加入购物车 → 购物车 → 添加至项目 → 下载至本地

2.使用字体图标

在下载好的安装包中，找到html文件：

 打开html文件后，选择第二类，font class，里面的每个字体图标下面会有两个名字，选择以 .icon- 开头的名字，使用时只需复制对应的名字，复制时不需要把点（.）复制，或者粘贴之后删掉点（.）

 然后我们找到我们需要使用字体图标的html文件，引入字体图标的css文件：