uni-app 中使用iconfont

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

image.png

Step 1. 修改iconfont.css 内容@font-face下，主要是路径，不然会报错找不到文件。例如原路径src: url('iconfont.woff2?t=1670292774706') format('woff2')。修改为src: url('~@/static/iconfont/iconfont.woff2?t=1670292774706') format('woff2')。

如下

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

代码:

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

image.png

更改uni-app标题栏中icon的使用方法如下：

image.png

注意:

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