uni-app 中使用iconfont

在iconfont中将图片添加到项目，并从项目下载到本地。将下图文件复制到static下。我这里是建了一个icon目录。

image.png

Step 1. 修改iconfont.css 内容@font-face下，主要是路径，不然会报错找不到文件。

image.png

代码:

@font-face {
  font-family: "iconfont"; /* Project id 3128237 */
  src: url('~@/static/icon/iconfont.ttf'),
       url('~@/static/icon/iconfont.woff2?t=1641780677504') format('woff2'),
       url('~@/static/icon/iconfont.woff?t=1641780677504') format('woff'),
       url('~@/static/icon/iconfont.ttf?t=1641780677504') format('truetype');
}

Step 2. 在App.vue 全局引入iconfont.css

image.png

代码:

<style lang="scss">
    /*每个页面公共css */
    /* iconfont */
    @import "@/static/icon/iconfont.css"
    
</style>

使用就很简单了，跟官网一样。

image.png


更改uni-app标题栏中icon的使用方法如下：
image.png
注意:

在iconfont中定义的css.content 是 \e68f
在page.json中要改成\ue68f，就是加个u，以\u开头