微信小程序如何使用阿里字体图标(用法非常简单适用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> 

猜你喜欢

转载自blog.csdn.net/qq_39043923/article/details/89332854
今日推荐