微信小程序引入外部icon

微信小程序引入外部icon最详细介绍

1.获取图标

阿里矢量库:iconfont-阿里巴巴矢量图标库

选中相应的图标

  1. 添加图标到购物车(多个图标)      ​​​​​
  2.  添加项目
  3.  下载本地
  4.  解压转换—-》 转化网站:Online @font-face generator — Transfonter

 2.小程序引用

  1. 文件复制指引
  2.  矢量库文件中的内容被转换的文件内容替换,之后总文件在到wcssapp.wcss文件内容如下:             
    
    @font-face {
      font-family: 'iconfont';
      src: url('data:font/woff2;charset=utf-8;base64,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') format('woff2'),
          url('data:font/woff;charset=utf-8;base64,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') format('woff'),
          url('iconfont.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }
    
    
    .iconfont {
      font-family: "iconfont" !important;
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    
    .icon-a-hezuo2:before {
      content: "\e61f";
    }
    
    .icon-a-gongzuoguanli-huiyiguanli2:before {
      content: "\e620";
    }
    
    .icon-a-shalou1:before {
      content: "\e621";
    }
    
    .icon-wailaidengjizonglan:before {
      content: "\e6cf";
    }
    
    .icon-renyuanguanli:before {
      content: "\e6d0";
    }
    
    .icon-renyuanxinxi:before {
      content: "\e6d1";
    }
    
    .icon-a-20-huiyiqiandao:before {
      content: "\e6e5";
    }
    
    .icon-paihangbang:before {
      content: "\e707";
    }
    
    .icon-remenhuati:before {
      content: "\e708";
    }
    
    .icon-zhibo:before {
      content: "\e709";
    }
    
    .icon-zunguishenfen:before {
      content: "\e70a";
    }
    
    .icon-xianshimianfei:before {
      content: "\e70b";
    }
    
    .icon-qiandao:before {
      content: "\e70c";
    }
    
    
  3. 使用
    <icon class="iconfont icon-renyuanguanli">DSAF</icon>
    <icon class="iconfont icon-a-hezuo2">DSAF</icon>

                 

 注意,有色图标用不了,效果如第一个图所示

        

         

如果你觉得有用,请给个赞吧👍!!

如果你觉得有用,请给个赞吧👍!!

如果你觉得有用,请给个赞吧👍!!

 

 

 

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

奋斗的蜗牛小猿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值