矢量图:我们平时见到的很多图片会因为设置的宽度和高度不同,而导致清晰度不同,这是因为图片是以像素为单位进行渲染的,简单的说,当你的宽度或者高度增加后,原来只有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>
大功告成。