uni-app 在 pages.json 顶部导航栏使用 iconfont 字体图标

冷不防 2023-01-11 03:44 402阅读 0赞

![在这里插入图片描述][20210125212929772.png_pic_center]

1.  在 [iconfont 图标库][iconfont] 找到要下载的图标，可以根据下面的步骤图，下载多个 iconfont 图标的代码，不需要多个的可以添加到购物车，单独下载代码。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkwMDQxNA_size_16_color_FFFFFF_t_70_pic_center 1]  
![在这里插入图片描述][20210125205321315.png_pic_center]  
3. 修改 iconfont.css 文件  
源文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkwMDQxNA_size_16_color_FFFFFF_t_70_pic_center 2]  
这时候编译会不通过！会提示svg、truetype、woff…找不到！那就将这几个去掉！

![在这里插入图片描述][20210125210614138.png_pic_center]  
5. pages.json 中配置导航栏按钮

{ 
    	"path": "pages/template/mail-list/customer/my-customer",
    	"style": { 
    		"navigationBarTitleText": "我的客户",
    		"navigationBarBackgroundColor": "#fff",
    		"navigationBarTextStyle": "black",
    		"app-plus": { 
    			"titleNView": { 
    				"buttons": [{ 
    					"text": "\ue6d4",
    					"fontSrc": "/static/iconfont/iconfont.ttf",
    					"color": "#999999",
    					"colorPressed": "#BBBBBB",
    					"fontSize": "14px"
    				}]
    			}
    		}
    	}
    }

注意事项

配置时 `fontSrc` 必须写

[vue 项目引用 iconfont 彩色图标][vue _ iconfont]

[20210125212929772.png_pic_center]: /images/20221119/a26f6746087747ef989957ef09ea2be7.png
[iconfont]: https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkwMDQxNA_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20210125204400885.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkwMDQxNA==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkwMDQxNA_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20210125205140594.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkwMDQxNA==,size_16,color_FFFFFF,t_70#pic_center
[20210125205321315.png_pic_center]: https://img-blog.csdnimg.cn/20210125205321315.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkwMDQxNA_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20210125210333779.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkwMDQxNA==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkwMDQxNA_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/20210125210352813.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkwMDQxNA==,size_16,color_FFFFFF,t_70#pic_center
[20210125210614138.png_pic_center]: https://img-blog.csdnimg.cn/20210125210614138.png#pic_center
[vue _ iconfont]: https://blog.csdn.net/weixin_43900414/article/details/116229686?spm=1001.2014.3001.5501