在iconfont中將圖片添加到項(xiàng)目惭适，并從項(xiàng)目下載到本地。將下圖文件復(fù)制到static下。我這里是建了一個(gè)icon目錄安拟。
image.png
Step 1. 修改iconfont.css 內(nèi)容@font-face下，主要是路徑宵喂，不然會(huì)報(bào)錯(cuò)找不到文件糠赦。例如原路徑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">
/*每個(gè)頁(yè)面公共css */
/* iconfont */
@import "@/static/icon/iconfont.css"
</style>
使用就很簡(jiǎn)單了拙泽，跟官網(wǎng)一樣淌山。
image.png
更改uni-app標(biāo)題欄中icon的使用方法如下：
image.png
注意:
在iconfont中定義的css.content 是 \e68f
在page.json中要改成\ue68f，就是加個(gè)u顾瞻，以\u開(kāi)頭
