微信小程序如何使用阿里字体图标(用法非常简单适用web)

生成iconfont(地址
  1. 把你想要的图标添加到购物车。
  2. 创建当前项目名称, 将购物车的图标加入项目
  3. 这样生成项目图标素材下载到本地, 需要用到 :1. iconfont.css 是图标样式定义;2. 红色的是字体文件

如图:
在这里插入图片描述

小程序应用

在这里插入图片描述

  1. 复制iconfont.css 文件样式到fonts.wxss中如下示例

注意: 这里字体文件的物理路径要写对

/*fonts.wxss*/
@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1555396659534'); /* IE9 */
  src: url('iconfont.eot?t=1555396659534#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAKgAAsAAAAABkgAAAJWAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcApQbAE2AiQDCAsGAAQgBYRtBzEbkwUR1Ytvsr8kcHPg1tGqKgyhEEO0oyEZa9t2LuK+2UpbSmJ8yibFUSpYJh6CtW9vdudMJN5lzKWSNUFJVEKkmiS84iH/rU3TMW2FiVAsyVWD7Fj6gTxj59PlEFJ3lCRzmeXWA27OfCkHQFILbPdAZva/OhjyiXunfwJ9kPnOuxz3orEmTeoCjAMpwL0wiqxIIm8Yu8AlPCZQb9iiWLt+6161krUqEFcvXTilNheVkhVqheqagykeq1JbPCyCR+H3468XSwpVJatl5/l1Z638yS5hqAxHfUKMgI5XocQikthbm92uFIwr1Z9O40gp+OmxR+zVKdhfZ9U3gkGouie1q7lVxQIkk+nF0KiLKTNbb6D5TsO4/nDDqD6as6GqBRkivf76csbpjXdnJs4cf+aT/2ekM8DvWAkqH8sPCxAInvcv2/+yIcGnFYYrHxP6+andky/4I+qeA6lrLXeRqrq2WOhVnqmtXj0qcLDdj7G2rtMXQ62umzDUaOoUpVqTZLKLqNJgCdVqrUC9BRuON+hwWymyDvPuAoRWT1Fo9gylVm/IZL+jSrf/qNYaE9TbH5sLG0wHl68zKaEEozfmcdtoxyvrqPFI6b1SnNWG/JXY5Al0LadYCKkhnmOLeaSeiEbNbY0BeI6qqsWO24JisTKRzrdtXfcmK25rWEMmJZRg9MY8bhvtj5Z16fNHSu+V4pa+mvKV2OTTo2s5PcjQ1PTqu5dXzCP1RDRqbmsMwDyqqha7+nkFxWJlI9Kdb9vDdF+Ttb6l/rpjAKzBso9H9swSk93ziHIA') format('woff2'),
  url('iconfont.woff?t=1555396659534') format('woff'),
  url('iconfont.ttf?t=1555396659534') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1555396659534#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-shuibei:before {
  content: "\e7d4";
}

  1. 导入到wxss
/*index.js*/
@import "../../lib/wxss/fonts.wxss";
  1. 页面使用

注意:class 中必须写上iconfont 后面的就是图标名称

<!--index.wxml-->
<text class='iconfont icon-icon-shuibei'>喝水</text> 
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值