矢量图标的使用

首先，为什么要使用矢量图标？矢量图标是使用直线和曲线来描述的图形，所以在放大和缩小的情况下都不会失真，当我们制作响应式布局的时候，有可能就要对图片进行放大和缩小。

矢量图标下载官网

http://www.fontawesome.com.cn/cheatsheet/

矢量图标的简单使用

首先，官方也提供了一套使用教程，在官网就能直接看到，我这里说一下矢量图标的简单使用

1.下载官方提供的文件包

http://www.fontawesome.com.cn/download/font-awesome-4.7.0.zip

2.复制资源包中的fonts文件夹到你的项目下

3.引入css

<link rel="stylesheet" href="css/font-awesome.min.css">

4.通过class属性来控制矢量图标的类型，提供属性值大全

http://www.fontawesome.com.cn/cheatsheet/

具体使用实例

<i class="fa fa-camera-retro"></i> fa-camera-retro

-----------------------------默认大小控制

<i class="fa fa-camera-retro fa-lg"></i> fa-lg <i class="fa fa-camera-retro fa-2x"></i> fa-2x <i class="fa fa-camera-retro fa-3x"></i> fa-3x <i class="fa fa-camera-retro fa-4x"></i> fa-4x <i class="fa fa-camera-retro fa-5x"></i> fa-5x