学习笔记——uni-app中如何使用字体图标

柔光的暖阳◎ 2022-12-26 10:29 819阅读 0赞

--------------------

> 在使用uni-app开发时，有时会用到字体图标，使页面更漂亮。这里主要使用的是阿里图标库。

### 1.下载并将字体图标放到项目中： ###

>  可以直接到阿里字体图标库中下载。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70][]

> 将解压好的文件中的六个文件放到项目中去。一般放到static文件夹下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 1][]

![20201204202402971.png][]

### 2.修改iconfont.css文件： ###

> 不能直接使用，需要先配置一下。在iconfont前面加入~@/static/font/

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 2][]

###  3.全局使用字体图标： ###

> 如果想在整个项目中都可以使用字体图标，则需要在App.vue中导入

> 坑：必须在引入语句结尾加上分隔符；否则字体图标可能会不显示。

### 4.在app的导航栏使用字体图标： ###

> 可以去uni-app官网上看，在框架那部分有。
> 
> 在page.json中可以进行配置，主要需要导入ttf结尾的iconfont文件

"path": "pages/index/index",
    			"style": {
    				"navigationBarTitleText": "首页",
    				"enablePullDownRefresh": true,
    				"app-plus": {
    					"titleNView": {
    						"buttons": [{
    							"type": "none",
    							"float": "right",
    							"text": "\ue615 退出",
    							"fontSize": "12px",
    							"fontSrc": "/static/font/iconfont.ttf",
    							"width": "60px"
    						}, {
    							"type": "none",
    							"float": "left",
    							"text": "检查更新",
    							"fontSize": "12px",
    							"width": "60px"
    						}],
    						"autoBackButton": false
    					}
    				}
    				
    			}

### 5.使用彩色字体图标： ###

> 除了上述的icon font六个文件外，还要将iconfont.js文件也一同拿出来。

--------------------

> 以上，就是uni-app中使用字体图标的一些方法。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70]: /images/20221120/0658230a64f14d4fa90d960011bec750.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 1]: /images/20221120/9c102b49357245b1a211f47914959745.png
[20201204202402971.png]: /images/20221120/2566ce1b284047e89392bb658c0d2888.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 2]: /images/20221120/2d5370dafcae4d37aae0b67c6a96982f.png