目前大多数个人站使用的还是font-icon字体图标。也有一些字体图标站可以将图标转为svg格式。
SVG 即 Scalable Vector Graphics,是一种用来绘制矢量图的 HTML5 标签。你只需定义好XML属性,就能获得一致的图像元素。

使用SVG之前先将标签加入到HTML body中。就像其他的HTML标签一样,你可以为SVG标签为之添加ID属性。也可以为之添加css样式,例如“border-style:solid;border-width:2px;”。SVG标签跟其它的HTML标签有通用的属性。你可以用height:50px;width:50px; 为其添加高度和宽度,用fill:#fff;改变其颜色


在网页中使用SVG图标需要浏览器支持html5,所以IE6/8只能望而兴叹了。目前最简单的实现方法有三种

1、使用svg标签

网上已经有一些免费的svg标签绘制的图标
http://mastermay.github.io/freeSVG/
选择一个图标就会给出相应的html代码,我们只需要把这些代码复制粘贴到html结构中并且定义svg标签的高宽就可以看见这个图标了,比如

<svg class="icon" viewBox="0 0 32 32">
    <path d="M26.56 15.976l-6.125 0.002 0.002 11.226h-8.883v-11.227l-6.114 0.002 10.562-12.134z"></path>
</svg>

这段代码显示出来的就是一个向上的箭头。

2、引用svg文件

我们可以使用img标签或者css的background:url()的方式来引用svg文件,就像引用一张正常的图片一样。比如:

<img src="image.svg"/>
background:url("image.svg")