{
    分享网正式开通,我们为大家提供免费资源,欢迎大家踊跃投稿!

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

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

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

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

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

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

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

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


 
  @font-face {
    font-family: 'iconfont';
    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";
      color: red;
      font-size: 40rpx;
}
.icon-success::before{
    content: '\e6a1';
}
.icon-search::before{
    content: '\e6a2';
}
.icon-news::before{
    content: '\e6a3';
}
 
 
<view>
    <icon class="iconfont icon-success"></icon>
    <icon class="iconfont icon-search"></icon>
    <icon class="iconfont icon-news"></icon>
</view>
 

效果如下:

Unicode获取方式

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

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


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


资源均来自第三方,谨慎下载,前往第三方网站下载


爱资源分享网 , 版权所有丨本站资源仅限于学习研究,严禁从事商业或者非法活动!丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:在微信小程序中引入Iconfont阿里巴巴图标的方法
喜欢 ()分享 (0)