阿里矢量图标库的使用方法

阿里矢量图标库的使用方法

官网

1、注册
2、寻找图标，添加至购物车，注意尽量选取同一套图标库的图标。
3、打开购物车将图标添加至项目（或者点击右边+号，新建项目）。
4、找到我的项目，使用下载至本地或者使用线上链接代码

使用线上图标

1、在base.css文件写入字体图标代码

@font-face {
    font-family: 'iconfont';  /* project id 1528843 */
    src: url('//at.alicdn.com/t/font_1528843_9wyr3y762h.eot');
    src: url('//at.alicdn.com/t/font_1528843_9wyr3y762h.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_1528843_9wyr3y762h.woff2') format('woff2'),
    url('//at.alicdn.com/t/font_1528843_9wyr3y762h.woff') format('woff'),
    url('//at.alicdn.com/t/font_1528843_9wyr3y762h.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_1528843_9wyr3y762h.svg#iconfont') format('svg');
  }

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

2、全局配置引用base.css文件
3、html文件使用
这里的就是字体图标对应的Unicode

<span class="iconfont">&#xe63c;</span>
<i class="iconfont">&#xe63c;</i>

使用下载的图标

下载图标，解压缩包，得到如下文件

使用
1、将解压后的文件,如下框选中的五个文件拷贝至项目中的font文件夹种

2、在base.css文件写入字体图标代码

@font-face {
	font-family: 'iconfont';
	src: url('../font/iconfont.eot');
	src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),
		url('../font/iconfont.woff2') format('woff2'),
		url('../font/iconfont.woff') format('woff'),
		url('../font/iconfont.ttf') format('truetype'),
		url('../font/iconfont.svg#iconfont') format('svg');
}
.iconfont {
	font-family: "iconfont" !important;
	font-size: 16px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

与线上使用相比，仅仅是src变成了本地链接，剩下的步骤是一样的
3、全局配置引用base.css文件
4、html文件使用
这里的就是字体图标对应的Unicode

<span class="iconfont">&#xe63c;</span>
<i class="iconfont">&#xe63c;</i>