提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、项目准备
- 1、挑选自己喜爱的图标并添加至购物车
- 2、点击右上角的购物车查看已添加的图标
- 3、将选中图标添加至自己发起的项目或者参与的项目当中，在资源管理我的项目中查看
- 4、下载至本地（记得下载好之后给文件夹改名字，便于使用）
- 5、将文件夹导入uniapp项目中
二、使用步骤
- 1、在App.vue中全局引入字体资源
- 2、修改iconfont.css文件（两种方式）
- 3、使用方式
总结

前言

随着uniApp的深入人心，我司也陆续做了几个使用uniapp做的移动端跨平台软件，在学习使用的过程中深切的感受到了其功能强大和便捷，今日就如何在uniapp项目中使用阿里字体图标的问题为大家献上我的一点心得，不足之处还望指正。

一、项目准备

在一个项目开始之前，我们要先准备一下即将在过程之中需要使用的阿里字体图标，当然后期也可以增加新的字体图标进来，但是有个
基本原则一定要谨记：
1、一个项目中最好只使用一个iconfont文件，防止unicode码重复引起的图标显示错误；
2、项目的图标最好是只增加不删除，当一个项目使用的阿里图标很多时，维护起来很便捷

记住这些准则，下面开始介绍添加自己喜爱的字体图标。
首先打开阿里字体图标的官方网站https://www.iconfont.cn/

1、挑选自己喜爱的图标并添加至购物车

2、点击右上角的购物车查看已添加的图标

3、将选中图标添加至自己发起的项目或者参与的项目当中，在资源管理我的项目中查看

4、下载至本地（记得下载好之后给文件夹改名字，便于使用）

5、将文件夹导入uniapp项目中

温馨提示：在pages同级新建文件夹plugin将上图显示文件夹改名为iconfont，便于使用

二、使用步骤

1、在App.vue中全局引入字体资源

代码如下：

<script>export default {onLaunch: function() {console.log('App Launch')},onShow: function() {console.log('App Show')},onHide: function() {console.log('App Hide')}}
</script><style>/*每个页面公共css *//* 引入项目的图标 */@import "plugin/iconfont/iconfont.css"; //此处路径根据自己的文件结构填写自己的路径
</style>

2、修改iconfont.css文件（两种方式）

方法一如下图所示：

方法二如下图所示：

红色下划线的地方代表着本地资源路径，它指向的是该路径下的指定资源文件（后面讲更新的时候会用到）；两者不同之处在于红色圈住的地方，如果两种都不写会导致图标无法显示，如下图所示

3、使用方式

对应方法一引入的使用方式如下图所示：

由图可知class中的 iconfont对应的是fontfamily，指的是需要使用的字体图标群，真正指定单个图标的是后面的Unicode码，之前提过的不建议在同一个项目中使用多个字体图标文件，如果必须用的话建议fontfamily一定要区分开：

对应方法二引入的使用方式如下图所示：

比起方法一方法二的优点在于方便快捷使用，使用时只需在class中输入对应图标的fontclass即可
特殊注意事项：方式一可以实现一次实现多个字体图标，而方法二不行，但是我发现了一个神奇的用法请揣摩下图

总结

1、通过iconfont.css文件可知，阿里字体图标是以伪元素的方式存在的，这里纠正一下错误在css3以后规定伪类是：单冒号，伪元素是::双冒号但由于历史原因，浏览器仍然认可伪元素单冒号的写法；:before是指在指定元素前面插入 :after是后面

2、精美的阿里字体图标库不仅可以丰富我们的软件，还可以大大减少软件的体积。我们不仅可以使用别人的作品，有能力的小伙伴可以尝试着DIY自己的作品，以上便是本次的全部内容。

uniapp——如何在项目中使用阿里字体图标相关推荐

在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont symbol方式
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont 1. symbol 方式 2. font class 方式(未实践) 1. symbol 方式首先说明一下,这 ...
手把手教你如何在项目中使用阿里字体图标IconFont
阿里图标官网地址:IconFont-阿里巴巴矢量图标库一.注册账号要使用阿里图标,首先你要在它的官网注册一个账号,注册的方式有多种(手机号,Github,微博,阿里域账号),根据你自己的情况进行选 ...
vue框架项目中使用阿里矢量图标库
vue框架项目中使用阿里矢量图标库一.打开阿里矢量图标,将需要图标加入购物车,选择下载代码二.解压缩包,将解压缩后的文件夹放入项目文件夹下的src/assets 1.在main.js中引入css ...
vue项目中使用阿里iconfont图标(下载并在本地引用)
vue项目中使用阿里iconfont图标(下载并在本地引用) step1 step2 step3 在scr/asstets/css目录下新建icons文件夹,把图中所需要的四个文件放进去即可记得在m ...
在Uni-App中使用阿里字体图标库
在使用Uni-App框架开发微信小程序时,需要用到阿里字体图标库,本来是在public/index.html中通过link引入了图标的在线地址,通过npm run serve运行到浏览器上可以正常显示 ...
如何在uniapp中引入阿里字体图标
在阿里字体图标里面点击下载到本地然后将解压出来的文件放到static目录下,我的是static/font 然后在App.vue中引入 @import url("./static/font/ ...
小程序中使用阿里字体图标
相信有这个需求的都在其他项目中用过阿里图标,所以这里就跳过怎么去找阿里图标. 1. 找好了图标之后,直接下载到本地 2. 点击查看在线连接复制代码 3. 将刚才下载好的字体图标项目解压,找到 ico ...
vue前端项目中使用阿里矢量图标（Font class）
一.登录阿里巴巴矢量图标库阿里巴巴矢量图标库二.点击图标库三.选择图标选择图标后,会进入该类型的图标库,然后鼠标划上想选择的那个图标,会有三个选择,分别为"添加入库", & ...
vue项目中如何使用字体图标，简单清晰明了！
1.登录阿里巴巴图标库官网,创建一个自己的项目,并将对应的svg图片添加或上传到对应的项目中,如下图所示: 2.点击[下载至本地]按钮,将文件夹下载下来: 3.在项目中src/assets目录下创建一 ...
angular7项目中使用Iconfont字体图标库
iconfont官网 https://www.iconfont.cn 选择字体图标首先进入iconfont官网,然后使用github账号登录,搜索自己需要的图标,添加至购物车,然后添加之我的项目,点 ...

uniapp——如何在项目中使用阿里字体图标