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

1.HTML + Font 方式：

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

　　关于字体图片，我们可以自己制作，也可以从网上下载阿里巴巴矢量图库、在线图标字体库、Icomoon.com等。

2.IcoMoon:

是一个在线的图标字体生成器。其允许我们通过个性化设置生成ICON字体，我们可以上传本地ICON资源也可以使用IcoMoon给我们提供的丰富素材，最终生成的ICON字体有多种格式供我们选择(EOT, SVG, WOFF, TTF)。

具体转换步骤参考: 使用IcoMoon生成图标字体 https://www.jianshu.com/p/86fca912fd1d，转换之后下载即可。

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

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

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

5.字符图标的优点

·可以很容易任意地缩放；

·很容易地改变颜色；

·很容易地产生阴影；

·可以拥有透明效果；

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

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

与位图比较：

·位图图片不能很好地进行缩放，当图片进行放大时会失真（即变模糊），当图片进行缩小时就会浪费掉像素；

·而且位图每加载一张图片都需要一次 “http请求”，因此也拖慢了整个加载页面的时间。

巴特西

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

最新文章

热门文章