在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
代码:
<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开头
