在网页中使用矢量图标

做网页时常常需要用到一些标志性的小图标

可以通过放置小图标的图片来实现，但也可以通过使用矢量图标来做，使用矢量图标的好处是，可以在放大时保持清晰度。

做法

这里以阿里巴巴矢量图标库为例，打开网址www.iconfont.cn

搜索你需要用到的图标，将他们放入购物车

添加进项目中

到该项目中，选择下载到本地，并放入项目目录

下载解压后，可以通过打开demo_index.html文件查看使用说明

在需要用到矢量图标的网页的style文件中，添加字体，注意选择对应文件路径

@font-face {
  font-family: 'iconfont';
  src: url('../font/iconfont/iconfont.eot');
  src: url('../font/iconfont/iconfont.eot?#iefix') format('embedded-opentype'),
      url('../font/iconfont/iconfont.woff2') format('woff2'),
      url('../font/iconfont/iconfont.woff') format('woff'),
      url('../font/iconfont/iconfont.ttf') format('truetype'),
      url('../font/iconfont/iconfont.svg#iconfont') format('svg');
}

然后添加iconfont类属性

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

最后在html文件中，给需要添加图标的位置填写图标代码，并添加类.iconfont,例如我想添加购物车的图标：
复制图标代码

html:

<a href=""><span class="iconfont">&#xe600;</span>购物车<span class="num">（0）</span></a> 

css:

.topbar-cart .iconfont{
	font-size: 16px;
	padding-right: 4px;
	vertical-align: -2px;		/*让字符下移*/
}

效果：