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

冷不防 2022-02-19 11:27 448阅读 0赞
生成iconfont(地址)
  1. 把你想要的图标添加到购物车。
  2. 创建当前项目名称, 将购物车的图标加入项目
  3. 这样生成项目图标素材下载到本地, 需要用到 :1. iconfont.css 是图标样式定义;2. 红色的是字体文件

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

小程序应用

在这里插入图片描述

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

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

  1. /*fonts.wxss*/
  2. @font-face { font-family: "iconfont";
  3. src: url('iconfont.eot?t=1555396659534'); /* IE9 */
  4. src: url('iconfont.eot?t=1555396659534#iefix') format('embedded-opentype'), /* IE6-IE8 */
  5. 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'),
  6. url('iconfont.woff?t=1555396659534') format('woff'),
  7. url('iconfont.ttf?t=1555396659534') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  8. url('iconfont.svg?t=1555396659534#iconfont') format('svg'); /* iOS 4.1- */
  9. }
  10. .iconfont {
  11. font-family: "iconfont" !important;
  12. font-size: 16px;
  13. font-style: normal;
  14. -webkit-font-smoothing: antialiased;
  15. -moz-osx-font-smoothing: grayscale;
  16. }
  17. .icon-shuibei:before {
  18. content: "\e7d4";
  19. }
  1. 导入到wxss

    /index.js/
    @import “../../lib/wxss/fonts.wxss”;

  2. 页面使用

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

  1. <!--index.wxml-->
  2. <text class='iconfont icon-icon-shuibei'>喝水</text>

发表评论

表情:
评论列表 (有 0 条评论,448人围观)

还没有评论,来说两句吧...

相关阅读