微信小程序中引入iconfont阿里矢量图库

阿里巴巴图标iconfont网址

iconfont网址 :https://www.iconfont.cn/

  1. 登录网站
  2. 搜索相应图标
    在这里插入图片描述
    将想要的图标添加到 购物车车里;
  3. 添加图标到项目
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    新建项目完成后,自动跳转,之后选择下载至本地;
    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";
}
  1. 打开微信开发者工具,找打app.wxss,将刚才复制的内容粘贴至下面;
    在这里插入图片描述
    在这里插入图片描述
  2. 在wxml中引用icon图标,例如引用icon-Oilbarrel图标icon-zuixing-64
  3. 若图标引用名称、大小及颜色可以自己改变
    在这里插入图片描述
    ps:注意,我为了方便,所以直接写在了app.wxss中,当然你可以自己新建一个wxss文件,然后使用@import方式引入这个wxss样式。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值