uni-app 自定义图标

刺骨的言语ヽ痛彻心扉 2023-01-23 13:50 261阅读 0赞

[https://blog.csdn.net/IT\_iosers/article/details/113278091][https_blog.csdn.net_IT_iosers_article_details_113278091]

### 1、在page.json里的配置项 ###

主要注意：`fontSrc：图标类型为ttf text`为图标的`unicode编码` `float`决定了图标时的位置

{ 
     "path": "pages/my/index",
     "style": { 
         "app-plus": { 
             "titleNView": { 
                 "buttons": [{ 
                         "text": "\ue605",
                         "fontSrc": "/static/iconfont.ttf",
                         "fontSize": "22px",
                         "float": "left"
                     },
                     { 
                         "text": "\ue606",
                         "fontSrc": "/static/iconfont.ttf",
                         "fontSize": "22px"
    
                     }
                 ]
             }
         }
     }
    },

### 2、更换图标 在iconfont 中找到自己喜欢的图标 ###

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

### 3、在编辑器打开已经下载的文件,把文件里的iconfont.ttf丢到static文件夹里，然后再打开iconfont.css里查看unicode编码 ###

![在这里插入图片描述][2021071511463226.png]

### 4、最后把对应图标的编码填写到page.json的配置项里text，需要写成一个"\\u\*\*\*"，然后重启就实现了 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTI5NTg3NA_size_16_color_FFFFFF_t_70 1]

[https_blog.csdn.net_IT_iosers_article_details_113278091]: https://blog.csdn.net/IT_iosers/article/details/113278091
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTI5NTg3NA_size_16_color_FFFFFF_t_70]: /images/20221004/0208d39c4236432c8ceb4c6cadbfe3d2.png
[2021071511463226.png]: /images/20221004/494648a0ec16401ebfe753396030edb0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTI5NTg3NA_size_16_color_FFFFFF_t_70 1]: /images/20221004/a438bc94b6594b8697fca9942042904a.png