uni-app 自定义图标

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

https://blog.csdn.net/IT_iosers/article/details/113278091

1、在page.json里的配置项

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

  1. { 
  2.  "path": "pages/my/index",
  3.  "style": { 
  4.      "app-plus": { 
  5.          "titleNView": { 
  6.              "buttons": [{ 
  7.                      "text": "\ue605",
  8.                      "fontSrc": "/static/iconfont.ttf",
  9.                      "fontSize": "22px",
  10.                      "float": "left"
  11.                  },
  12.                  { 
  13.                      "text": "\ue606",
  14.                      "fontSrc": "/static/iconfont.ttf",
  15.                      "fontSize": "22px"
  17.                  }
  18.              ]
  19.          }
  20.      }
  21.  }
  22. },

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，390人围观）

还没有评论，来说两句吧...

相关阅读

    相关 MUI实现自定义图标

    引言 在日常生活中，我们对图的感知能力总要强于对字的感知能力，所以在开发过程中适当的在应用里添加一些小巧又漂亮的图标是很有必要的，这可以轻轻松松的提高一大截的用户体验...

    ╰半橙微兮°╰半橙微兮°/ 0 赞/ 229 阅读

    相关 mui自定义图标

    研究了一下自定义图标，不仅仅可以在h5里面用，还可以在小程序或者别的开发环境里面用。 首先找到图标源，我自己找的是阿里巴巴矢量图库。 ![watermark_type_Zm

    曾经终败给现在曾经终败给现在/ 0 赞/ 589 阅读