【小程序开发】uniapp中引入iconfont方式 保姆级教程

一、iconfont矢量图标库将所选图标加入购物车

• 添加入库
  
• 进入购物车 ----->下载代码
  

二、uniapp中创建静态目录

• 在根目录下创建static目录—>iconfont目录
  

三、解压样式文件

• 将文件放到刚刚创建的iconfont文件夹中
  

四、转码

• 下面我们需要将 iconfont.ttf这个文件转换为 base64
• 转码地址：https://www.giftofspeed.com/base64-encoder/
  
• 复制转码内容
  

五、iconfont.css文件中将转码后的内容替换

• 替换前

@font-face {
  font-family: "iconfont"; /* Project id  */
  src: url('iconfont.ttf?t=1695294381611') format('truetype');
}

• 替换后

@font-face {
  font-family: "iconfont"; /* Project id  */
  src: url('data:application/x-font-woff2;charset=utf-8;base64,我们要将转码内容粘贴到这里');
}

六、公共样式导入

<style lang="scss" scoped>
  /*将需要用到iconfont图标的页面引入公共样式*/
  @import '~@/static//iconfont/iconfont.css'
</style>

七、使用图标

• 这里class中iconfont是固定的，后面具体需要从下面iconfont.css中复制

//在template模板中引用图标
<view>
	<i class="iconfont icon-dizhi" ></i>
	<i class="iconfont icon-shezhi" ></i>
</view>

八、运行

• 想要给图标设置样式的话，在iconfont.css中设置即可