引入外部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’
  • 在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/lujiebin/article/details/105859819
今日推荐