在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>
使用就很简单了,跟官网一样。
更改uni-app标题栏中icon的使用方法如下:
image.png
注意:
在iconfont中定义的css.content 是 \e68f
在page.json中要改成\ue68f,就是加个u,以\u开头
网友评论