引入外部iconfont到微信小程的方法(以阿里iconfont为例)

阿里iconfont网站链接里面有很多icon图标

1.直入正题,进入官网后,点击图标管理->我的项目->创建项目

在这里插入图片描述

2.然后单击上传图标到项目,到达这个页面,然后就把自己在这个网站里下的SVG图片导入

在这里插入图片描述

3.在小程序全局app.wss中

/* 复制的代码 */
@font-face {
  font-family: 'iconfont';  /* project id 1792794 */
  src: url('//at.alicdn.com/t/font_1792794_kogj8g9f9p.eot');
  src: url('//at.alicdn.com/t/font_1792794_kogj8g9f9p.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1792794_kogj8g9f9p.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1792794_kogj8g9f9p.woff') format('woff'),
  url('//at.alicdn.com/t/font_1792794_kogj8g9f9p.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1792794_kogj8g9f9p.svg#iconfont') format('svg');
}
.iconfont {
  font-family:"iconfont" !important;
  font-size:40rpx;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* 这里是每个图标文件 */
.icon-bianji:before{content: '\e615';}
.icon-female:before{content: '\e617';}
.icon-male:before{content: '\e616';}
.icon-lianren:before{content: '\e613';}

4.使用

<!-- view里的class类里可以修改icon的大小颜色等 -->
 <view class="icon-bianji-ys">
 	<icon class="iconfont icon-bianji"></icon>
 </view>

注意事项

  • 每次在阿里iconfont那个网站里加入新icon后要使用一定要更新Uncode代码,然后重新复制到app.wxss里
  • .icon-bianji:before{content: ‘\e615’;}这里的‘\e615’
  • 在这里插入图片描述
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值