项目框架引入第三方icon图标


项目引入的框架自带图标库未必能完全满足项目需求,必要时还是需要引入第三方icon。对于我们来说,首选的当然是阿里icon库。

iconfont官网

iconfont官网地址

创建项目

在这里插入图片描述
项目名称随便写。前缀注意,不要跟element-ui等UI框架自带的icon(前缀为:el-icon)重名了。
在这里插入图片描述
将购物车的图标添加到我的项目中

下载到本地

在这里插入图片描述

解压,拷贝到src/asserts/icons下

在这里插入图片描述

main.js中引用

// 使用阿里的icon
import './assets/icons/iconfont.css'

icon名称复制

在这里插入图片描述

组件中使用

<i class="iconfont wxmall-icon-ico_meiyoushuju"></i>
<i class="iconfont wxmall-icon-Group"></i>
<i class="iconfont wxmall-icon-meiyoushuju"></i>
<i class="iconfont wxmall-icon-meiyoushuju1"></i>

使用iconfont在线地址替代本地引入

在这里插入图片描述
在index.html中引入iconfont远程地址,删除main.js中本地引入代码,组件中引用于之前一致

<link rel="stylesheet" href="//at.alicdn.com/t/font_1758987_ynrnozjf17d.css">

iconfont详细介绍

在这里插入图片描述
下载的压缩包解压后能看到demo_index.html文件,双击打开此文件。则能看到iconfont中有关Unicode Font class Symbol异同详细介绍

Unicode

在这里插入图片描述

Font class

在这里插入图片描述

Symbol

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_44116302/article/details/105545726