iconfont用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<!-- 第一步: 引入js文件 -->
<script src="//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编写的矢量文件，当你放大矢量图片的时候，不会出现失真和锯齿，PNG会
2. SVG可能会比较消耗性能，因为他的绘制过程是由xml文件中的点位置决定的
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
新图标
裁剪
然后导出即可
网友评论