一、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中设置即可