uni-app中使用阿里巴巴矢量图标库
1、打开网址,链接: 阿里巴巴矢量图标库
2、注册账号并登录,已有账号直接登录
3、选择图标,点击添加入库
4、点击购物车图标,查看添加入库的图标
5、点击“添加至项目”,可以选择将图标添加至已有项目中,或添加至新创建项目中。
6、添加成功后,进入项目详情页面,可以看到当前项目所包含的所有图标。
注意: 添加新图标至项目后,需要点击”更新代码“。并将更新后的代码重新下载,导入项目中。
7、下载代码至本地
8、找到下载的压缩包,解压缩后复制 iconfont.css 文件到uniapp项目的common文件夹中(若没有该文件夹,可以新建一个)
9、去到项目中复制代码,然后打开iconfont.css文件,替换@font-face中的内容。并且在//at前加上https:。
替换前iconfont.css内容:
@font-face {
font-family: "iconfont"; /* Project id 2555092 */
src: url('iconfont.woff2?t=1621316808304') format('woff2'),
url('iconfont.woff?t=1621316808304') format('woff'),
url('iconfont.ttf?t=1621316808304') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-fanchuan:before {
content: "\e603";
}
.icon-daohang:before {
content: "\e602";
}
替换后iconfont.css内容:
@font-face {
font-family: 'iconfont'; /* Project id 2555092 */
src: url('https://at.alicdn.com/t/font_2555092_gyq0zm29y5.woff2?t=1621316773774') format('woff2'),
url('https://at.alicdn.com/t/font_2555092_gyq0zm29y5.woff?t=1621316773774') format('woff'),
url('https://at.alicdn.com/t/font_2555092_gyq0zm29y5.ttf?t=1621316773774')