iconfont-阿里巴巴矢量图标库使用总结

iconfont官方网址

https://www.iconfont.cn/

创建项目

• 首页找到 资源管理 => 我的项目，点击+号创建项目。我这边创建了一个测试的项目

项目下添加图标

• 如上图所示，比如我想找一个，下载的图标，选中其中一个，点击购物车图标，然后点击添加至自己选中的项目。然后在我的项目中查看就会多了一个下载的图标

工程中如何引用项目图标

最常用的引入方式：

Unicode 引用

• 点击下载至本地。会得到一个压缩包，解压后，里面有demo样例,还有iconfont.css，iconfont.js和iconfont.ttf和 iconfont.woff 和 iconfont.woff2文件。把他们拷贝到项目中，如下图所示
  

• 然后打开iconfont.css如下图,其中的url括号里面的woff2文件和woff文件和tff文件路径需要替换成本地的文件，
  

• 改后变为
  

• 然后在app.vue 中引入

	<style lang="scss">
		    @import '@/common/iconfont2/iconfont.css';
	</style>

	挑选相应图标并获取类名，应用于页面,就能显示了：
	<span class="iconfont icon-xiazai"></span>

• 也可以直接引用在线地址如下图所示的url,直接导入项目张即可

但是要注意:在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。

<style lang="scss">
   @import url('//at.alicdn.com/t/c/font_4633317_0ypdrd2uf9y.css');
</style>

感谢大家阅读，我在业余时间用RuoYi框架开发了一个围绕“问道”游戏帮派的H5网站，已经经过安全备案，有兴趣的可以访问下,一起学习,网址为：https://www.tongmenghui.top