阿里巴巴图标iconfont网址
iconfont网址 :https://www.iconfont.cn/
- 登录网站
- 搜索相应图标
将想要的图标添加到购物车
车里; - 添加图标到项目
新建项目完成后,自动跳转,之后选择下载至本地;
4. 图标下载
5. 下载后解压,会发现有个iconfont.css文件,打开编辑并复制其中的内容。
```css
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1614737718590'); /* IE9 */
src: url('iconfont.eot?t=1614737718590#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
url('iconfont.woff?t=1614737718590') format('woff'),
url('iconfont.ttf?t=1614737718590') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1614737718590#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-airudiantubiaohuizhi-zhuanqu_helihuajianyi:before {
content: "\e696";
}
.icon-Oilbarrel:before {
content: "\e8af";
}
.icon-jianyifankui-:before {
content: "\e61b";
}
.icon-zuixing-64:before {
content: "\e63d";
}
- 打开微信开发者工具,找打app.wxss,将刚才复制的内容粘贴至下面;
- 在wxml中引用icon图标,例如引用icon-Oilbarrel图标
- 若图标引用名称、大小及颜色可以自己改变
ps:注意,我为了方便,所以直接写在了app.wxss中,当然你可以自己新建一个wxss文件,然后使用@import方式引入这个wxss样式。