主页 > 教程合集 > 工具推荐 >

在微信小程序中引入Iconfont阿里巴巴图标的方法

时间:2020-06-06 阅读:0

在小程序中,有默认的图标icon组件,但你会发现它的图标样式很少,可能很多时候并不能满足我们的需求,这时候我们就需要引入外部的一些图标。

在微信小程序中引入Iconfont阿里巴巴图标的方法

下面,就让我们一起去研究一下怎么引入Iconfont阿里巴巴图标。

Iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具。

首先需要小伙伴自行在微信开发工具中创建一个项目,需要注册一个iconfont账号,后面要用到,保存图标到到购物车,并添加至项目。

在微信小程序中引入Iconfont阿里巴巴图标的方法

随便找几个图标加入购物车,点击右上角购物车会出现如下图:

在微信小程序中引入Iconfont阿里巴巴图标的方法

然后点击添加至项目添加至项目(如果没有项目,可自行创建一个,我这儿创建了一个probject),然后点击上方图标管理并找到我的项目就能看到刚刚的图标了,点击查看在线链接并生成代码,就能看到下图:

在微信小程序中引入Iconfont阿里巴巴图标的方法

打开小程序删除多余文件,样式等,Unicode获取:


  /*index.css 复制上面的查看链接代码*/
  @font-face {
    font-family: 'iconfont'; /* project id 1858720 */
    src: url('//at.alicdn.com/t/font_1858720_5spl0qiknij.eot');
    src: url('//at.alicdn.com/t/font_1858720_5spl0qiknij.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_1858720_5spl0qiknij.woff2') format('woff2'),
    url('//at.alicdn.com/t/font_1858720_5spl0qiknij.woff') format('woff'),
    url('//at.alicdn.com/t/font_1858720_5spl0qiknij.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_1858720_5spl0qiknij.svg#iconfont') format('svg');
}
/*设置一些样式*/
.iconfont{
      font-family:"iconfont"; /*需要与@font-face的font-family一样*/
      color: red;
      font-size: 40rpx;
}
.icon-success::before{
    content: '\e6a1'; /*Unicode获取方式请看下文*/
}
.icon-search::before{
    content: '\e6a2';
}
.icon-news::before{
    content: '\e6a3';
}
 

  /*index.wxml*/
<view>
    <icon class="iconfont icon-success"></icon>
    <icon class="iconfont icon-search"></icon>
    <icon class="iconfont icon-news"></icon>
</view>
 

效果如下:

在微信小程序中引入Iconfont阿里巴巴图标的方法

Unicode获取方式

如下图点击复制代码会出现 &#xe6a1;

需要去掉一些没用的符号写成:'\e6a1' 放到css中就可以了,例如:


.icon-xxxx::before{
content: ‘\e6a1’;
}
 

在微信小程序中引入Iconfont阿里巴巴图标的方法

本站所有资源均在Resource资源站有分享,你可以点击 >>> Resource 进入资源站自助提取。

余斗余斗
  • 版权声明:原创文章由发表在工具推荐分类下,2020-06-06最后更新,转载注明出处。

相关推荐

返回顶部