uniapp项目添加阿里图标库字体图标（图标在手机、浏览器均可查看）

╰+攻爆jí腚メ 2022-12-22 04:59 1065阅读 0赞

# 前言 #

提示：本篇文章正文内容分为:

1.  给uniapp项目导航栏添加字体图标；
2.  在uniapp项目中使用字体图标。

# 一、给uniapp项目导航栏添加字体图标 #

1：登录阿里巴巴矢量图标库：[https://www.iconfont.cn/][https_www.iconfont.cn]  
2：新建项目，添加任意图标  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5NzU0OA_size_16_color_FFFFFF_t_70_pic_center]  
3：下载字体图标信息，并解压，解压后的文件夹里，iconfont.css和iconfont.ttf这里是需要用到的  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5NzU0OA_size_16_color_FFFFFF_t_70_pic_center 1]  
解压后：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5NzU0OA_size_16_color_FFFFFF_t_70_pic_center 2]  
4：将上面两个文件放在项目static文件夹下面：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5NzU0OA_size_16_color_FFFFFF_t_70_pic_center 3]  
5：在阿里巴巴矢量图标库项目里的Unicode下，点击查看在线链接，便会出现Unicode代码，在项目里打开iconfont.css文件，将Unicode这段代码覆盖掉iconfont.css文件里@font-face里面的内容，最后在 //at 前面加上https:

\*\*2021.08.08更新：直接替换查看后最新的在线链接，在图标库的项目设置里可以勾选需要的格式， 例如：彩色图标等，

## 要在手机上查看得到，最后在 //at 前面加上https: ##

@font-face \{  
font-family: ‘iconfont’; /\* Project id 1667012 */  
src:  
url(’//at.alicdn.com/t/font\_1667012\_wsn4yi6d8f.woff2?t=1628406260877’) format(‘woff2’),  
url(’//at.alicdn.com/t/font\_1667012\_wsn4yi6d8f.woff?t=1628406260877’) format(‘woff’),  
url(’//at.alicdn.com/t/font\_1667012\_wsn4yi6d8f.ttf?t=1628406260877’) format(‘truetype’);  
\}*\*

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5NzU0OA_size_16_color_FFFFFF_t_70_pic_center 4]  
!\[在这里插入图片描述\](https://img-blog.csdnimg.cn/20201118002101670.png?x-oss-process=image/watermark,type\_ZmFuZ3poZW5naGVpdGk,shadow\_10,text\_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5NzU0OA==,size\_16,color\_FFFFFF,t\_70\#pic\_center  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLNzZG4ubmV0L3dlaXhpbl80MzY5NzU0OA_size_16_color_FFFFFF_t_70_pic_center]

6：打开项目里的pages.json文件，并使用相应的字体图标和路径。注意：text里面的 u 前缀不可省略，字体图标路径是文件iconfont.ttf的路径。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5NzU0OA_size_16_color_FFFFFF_t_70_pic_center 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5NzU0OA_size_16_color_FFFFFF_t_70_pic_center 6]  
效果展示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5NzU0OA_size_16_color_FFFFFF_t_70_pic_center 7]

# 二、uniapp项目文件中使用字体图标 #

方式1： 在app.vue文件的style样式里面引入：

@import url("@/static/font/iconfont.css");

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5NzU0OA_size_16_color_FFFFFF_t_70_pic_center 8]

方式2：在main.js中引入：  
若出现提示：App平台 v3 模式暂不支持在 js 文件中引用"@/static/font/iconfont.css" 请改在 style 内引用，则请改用方式1的引用方式

import "@/static/font/iconfont.css"

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5NzU0OA_size_16_color_FFFFFF_t_70_pic_center 9]

最后，引入样式后在文件中使用：

class里面的 icon-xiaoxi1等字体图标名和我们项目里面字体图标库里的font-class名是一致的  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5NzU0OA_size_16_color_FFFFFF_t_70_pic_center 10]  
效果展示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5NzU0OA_size_16_color_FFFFFF_t_70_pic_center 11]

### 写在最后，不止是uniapp项目，其他项目对字体图标的引入大体也是相同的，希望对正在寻找答案的你有所帮助。 ###

[https_www.iconfont.cn]: https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5NzU0OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/9921ea9056b143df92ffca038e2b24e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5NzU0OA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/994c01e66a164734b0a8c235b2f62003.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5NzU0OA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/7bc5e80738cb43bdb6ae61e5ccdd6333.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5NzU0OA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221120/132967e4e7ae4d1d8a3ea5f824bc40b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5NzU0OA_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221120/c6f245f32a4a47c38d069b7bc4bb97d3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLNzZG4ubmV0L3dlaXhpbl80MzY5NzU0OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/c0c207f3acaa494bab44b7b2f60df48d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5NzU0OA_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221120/f13cdb4386f24fc5a711e61731bf5321.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5NzU0OA_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221120/c0b4027316334cd2abe41a532254f003.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5NzU0OA_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221120/d66d5c2ee95d43f4984a49de27c85aa4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5NzU0OA_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221120/511fe3aff4e44eb79473c7afeacfa3d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5NzU0OA_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221120/57d9adc409ba4a3484921a36b4ddcb5e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5NzU0OA_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20221120/fed5f719172247ebbb9b9ec2e6050533.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5NzU0OA_size_16_color_FFFFFF_t_70_pic_center 11]: /images/20221120/027087ef5f9844da9cca3e6a617e5ff4.png