iconfont-阿里巴巴矢量图标库官网 

目前网站已经有了3063391图标素材 简单来说 站长福音

 

如何在WordPress中使用Iconfont字体图标
下载详情页:可查阅icon归属图标库与作者,多色图标支持分路径改色,下载图标自动保存最近使用的颜色
如何在WordPress中使用Iconfont字体图标
购物车:将图标加入购物车后,可以批量下载素材和代码、批量添加至项目
如何在WordPress中使用Iconfont字体图标
支持单个或批量上传多个icon、支持单色/多色icon同时上传、支持图标自定义配置标签
如何在WordPress中使用Iconfont字体图标
图标库是一系列相关图标的集合,由图标上传者创建,需通过审核才可公开/加密访问 图标库分为官方图标库/自定义图标库/多色图标库
如何在WordPress中使用Iconfont字体图标

目前Iconfont支持Github,阿里域和微博直接登录,注册都不需要
  登录后,你会看到一个大大的搜索框,输入关键字进行查找
如何在WordPress中使用Iconfont字体图标

 

比如说搜索“链接”

如何在WordPress中使用Iconfont字体图标

 

搜到的图标会单页展示 

如何在WordPress中使用Iconfont字体图标

 

并且每一个图标鼠标移上去 都有一个添加入库的购物车图标 如何在WordPress中使用Iconfont字体图标

 

要是你认为图标素材收集OK了 点击页面右上角的购物车添加至项目 无项目则创建一个

如何在WordPress中使用Iconfont字体图标

图标项目页

如何在WordPress中使用Iconfont字体图标


有三种方式提供在网页中引用,这里介绍第一种,其余原理一样

第一步:点击生成代码 并将代码复制

如何在WordPress中使用Iconfont字体图标
如何在WordPress中使用Iconfont字体图标

第二步:将以下全部代码复制到你主题的自定义css样式中

/* 这段代码改成你自己项目的代码 */
@font-face {
font-family: 'iconfont'; /* project id 809045 */
src: url('//at.alicdn.com/t/font_809045_z34l7k43qtm.eot');
src: url('//at.alicdn.com/t/font_809045_z34l7k43qtm.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_809045_z34l7k43qtm.woff') format('woff'),
url('//at.alicdn.com/t/font_809045_z34l7k43qtm.ttf') format('truetype'),
url('//at.alicdn.com/t/font_809045_z34l7k43qtm.svg#iconfont') format('svg');
}

/* 这段必须有 */
.iconfont{
font-family:"iconfont" !important;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}

第三步:选择相应图标并复制图标代码,如: ,然后像下面一样使用。

<i class="iconfont">&#xe607;</i>

第四步:复制第三步的全部代码粘贴到你想要显示图标的位置


原野上压过凛然的风声 那是沿途一遍遍累积的叹息