iconfont用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<!-- 第一步: 引入js文件 -->
<script src="http://at.alicdn.com/t/font_794771_v8cokuhr4wm.js"></script>
<!-- 第二步: 添加css -->
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
</head>
<!--
SVG:
1. 是由xml編寫的矢量文件声功，當(dāng)你放大矢量圖片的時(shí)候茵瘾，不會(huì)出現(xiàn)失真和鋸齒搞莺，PNG會(huì)
2. SVG可能會(huì)比較消耗性能，因?yàn)樗睦L制過程是由xml文件中的點(diǎn)位置決定的
3. 文件很小
4. 可以自定義大小，顏色，描邊等等
-->
<body>
<!-- 第三步: use #icon-qq -->
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-qq"></use>
</svg>
<!-- 可以自定義顏色、寬高與描邊. -->
<svg style="fill: red; width: 100px; height: 100px; stroke: red; stroke-width: 10px" class="icon" aria-hidden="true">
<use xlink:href="#icon-weibo"></use>
</svg>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-weixin"></use>
</svg>
</body>
</html>
PS
新圖標(biāo)
裁剪
然后導(dǎo)出即可
