uni-app添加阿里巴巴图标库图标

Posted on 2019-09-06 03:36  猫头唔食鱼  阅读(943)  评论(0编辑  收藏  举报

1.打开阿里巴巴图标库地址

https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2

选择需要的图标,加入购物车,添加到项目(需要登录github账户),然后

 

点击确定后,选择下载代码

 

 

 

 2.打开下载的文件夹,找到里面的iconfont.css,把这个文件粘贴到common文件夹里,打开iconfont.css,删除以下代码:

 

 3.在app.vue中引入,

在style标签中加入如下代码

/* 引入图标 */
@import "./common/iconfont.css";

 

 4.使用图标,有两种方式

(1)方式一:使用unicode

在demo_index.html中,选择unicode,

 

 

 在vue文件中使用,添加icon iconfont 两个类,复制对应unicode

 <!-- 使用unicode引入图标 -->
 <view class="icon iconfont">&#xe613;</view>

 

(2)方式二:使用类名

在demo_index.html中,选择 Font class

右键选中图标,查看元素,复制对应的类名

 

 

 

 在vue文件中使用, 在view标签复制刚刚的类名

<!-- 使用类名引入图标 -->
<view class="icon iconfont icon-icon_shezhi"></view>

效果: