将iconfont引入到web页面中

提示:

iconfont官网提供服务的方式不仅仅限于svg,AI,png这中图片的方式,还有一种需要通过点击到购物车然后生成代码的方式!!!

Iconfont官网直达

---

setp1 找到心仪的图标,添加到购物车,先添加

---

setp2 到购物车下载他们打包的代码,解压放到你项目的静态资源目录下

---

setp3 打开这个demo_index.html ,按照里边指导的步骤cv代码到你当前页面或模块的style标签中

按这个步骤CV代码

---

示例

<template>
  <div class="container" >
	  <span class="iconfont">&#xe60d;</span>    /*  span中的字符串就是你在demo_index.html最上边看到的图标的*/
  </div>
</template>

<script>

import Vue from 'vue';
import { Icon } from 'vant';

Vue.use(Icon);
Vue.use(Divider);

export default {	
	data:{}
}
</script>
<style>
	@font-face { 
	  font-family: 'iconfont';
	  /* src: url('../assets/iconfont/asiconfont.eot'); */
	  src: url('../assets/iconfont/iconfont.eot?#iefix') format('embedded-opentype'),
	      url('../assets/iconfont/iconfont.woff2') format('woff2'),
	      url('../assets/iconfont/iconfont.woff') format('woff'),
	      url('../assets/iconfont/iconfont.ttf') format('truetype'),
	      url('../assets/iconfont/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;
	} 
</style>

结果

基本到这边就这些,后边实际在其他地方用了再做补充