网页html——菜单小图标的使用（矢量图）

矢量图：我们平时见到的很多图片会因为设置的宽度和高度不同，而导致清晰度不同，这是因为图片是以像素为单位进行渲染的，简单的说，当你的宽度或者高度增加后，原来只有5个像素点显示的颜色，突然变成由10个像素点显示，肯定会变模糊，由此，矢量图诞生了，它的每一个图形元素都是一个独立的对象，它具有颜色、形状、轮廓、大小和屏幕位置等属性，当你改变大小时，相当于组成图片的每一个对象都会变化，因此，矢量的绘图同分辨率无关。这意味着它们可以按最高分辨率显示到输出设备上。

矢量图使用步骤：

1、先引入.css文件(这里我用的菜鸟教程的，貌似阿里的点击下载的时候一直显示error)

url:http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css

将上边的css自己复制下来或者直接下载下来。

2、修改css文件中的url（由于这个上边使用的时相对地址，我们改为绝对地址）

改为：将../改为http://cdn.bootcss.com/font-awesome/4.7.0/

3、设置class属性进行使用

<i class="fa fa-list"></i> 

大功告成。