uniapp 引入iconfont自定义图标

uniapp yekong

首先要下载图标

iconfont网址

将图标放入目录

不要放在assets目录下,uniapp开发的微信小程序打包时可能会过滤掉。
将图标放入目录

修改iconfont.css文件

将目录加入到css的字体目录中。

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

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-jiantou_zuoyouqiehuan:before {
  content: "\eb0d";
}


引入

在app.vue文件中引入

<style>
		@import url("@/icon/iconfont.css");
</style>

使用

<text class="icon iconfont icon-jiantou_zuoyouqiehuan"></text>

使用

喜欢