SVG小图片格式显示（图片文字，可设置title属性）

（1） HTML+ font方式：

   修改图标颜色只需修改字体颜色，修改图片大小只需修改字体大小。

   关于字体图片，我们可以自己制作，也可以网上下载（https://icomoon.io/app/#/select）、 FontAwesome(在线图标字体库，但资源有限)等。

（2）IcoMoon是一个在线的图标字体生成器。其允许我们通过个性化设置生成ICON字体，我们可以上传本地ICON资源也可以使用IcoMoon给我们提供的丰富素材，最终生成的

ICON字体有多种格式供我们选择（EOT,SVG,WOFF,TTF）。具体转换步骤参考https://www.jianshu.com/p/86fca912fd1d，转换之后下载即可。

（3）解压下载后的压缩包，复制fonts、css文件到同一个文件下（主要是因为css文件中的 URL设置），页面中 引入css文件，

（4）在需要的页面引用，直接加到相应标签的class属性中，作为样式引用即可。

.icon-trash-can:before伪元素来产生字符图标，其中“before”表示字符出现在左边，“after”则出现在右边。

（5）字符图标的优点

可以很容易任意地缩放；很容易地改变颜色；很容易地产生阴影； 可以拥有透明效果；

可以做出跟图片一样可以做的事情（改变透明度、旋转度，等）；

 本身体积更小，但携带的信息并没有削减。

与位图比较：位图图片不能很好地进行缩放，当图片进行放大时会失真（即变模糊），当图片

进行缩小时就会浪费掉像素。而且加载每一张图片都需要一次“http请求”，因此也拖

慢了整个加载页面的时间。