1：官网中添加相应的图标到购物车，并下载到本地
image.png
2：在项目的入口文件 main.js中引入字体文件的css
image.png
3：使用Unicode 方式
- 特点：支持按字体的方式去动态调整图标大小，颜色等等。
默认情况下不支持多色，直接添加多色图标会自动去色。
- 第一步：拷贝项目下面生成的 @font-face
@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1654584520031') format('woff2'),
url('iconfont.woff?t=1654584520031') format('woff'),
url('iconfont.ttf?t=1654584520031') format('truetype');
}
- 第二步：定义使用 iconfont 的样式
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
- 第三步：挑选相应图标并获取字体编码，应用于页面
<span class="iconfont">3</span>
4：在uniapp的 内置tabbar中如何使用
"tabBar": {
// 引入 字体文件的路径
"iconfontSrc": "./static/font/iconfont.ttf",
"fontSize": "22rpx",
"color": "#999999",
"selectedColor": "#58A6FF",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/index/home",
"iconfont": {
//在text属性中写入 iconfont的Unicode ，*要将替换为\ue
"text": "\ue656",
"fontSize": "50rpx",
"color": "#000000",
"selectedText": "\ue656",
"selectedColor": "#58A6FF"
},
"text": "首页"
}, {
"pagePath": "pages/index/userCenter",
"iconfont": {
"text": "\ue658",
"fontSize": "50rpx",
"color": "#000000",
"selectedText": "\ue658",
"selectedColor": "#58A6FF"
},
"text": "我的"
}]
}
