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

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>

效果:

猜你喜欢

转载自www.cnblogs.com/luguankun/p/11470760.html