WordPress之路 — 添加阿里iconfunt图标库

wordpress常见的图标库有Font Awesome跟阿里的iconfunt。

Font Awesome 网址：http://www.fontawesome.com.cn/faicons/  共收录675个图标，对日常使用来说已经足够。文章源自今夕何夕兮-https://www.ginc.site/code532.html

iconfunt 网址：https://www.iconfont.cn/文章源自今夕何夕兮-https://www.ginc.site/code532.html

今天主要讲的就是iconfunt，下面教程开始：文章源自今夕何夕兮-https://www.ginc.site/code532.html

一、首先打开官网 https://www.iconfont.cn/ ，注册账号。文章源自今夕何夕兮-https://www.ginc.site/code532.html

二、iconfunt网站操作
1、点击——我的资源——我的项目文章源自今夕何夕兮-https://www.ginc.site/code532.html

文章源自今夕何夕兮-https://www.ginc.site/code532.html

新建项目文章源自今夕何夕兮-https://www.ginc.site/code532.html

文章源自今夕何夕兮-https://www.ginc.site/code532.html

给项目起个名字，点击确认文章源自今夕何夕兮-https://www.ginc.site/code532.html

文章源自今夕何夕兮-https://www.ginc.site/code532.html

2、网页上方素材库——图标库

选择自己喜欢的图标，点击加入购物车。

额外：一键加购物车代码：

var span = document.querySelectorAll('.icon-cover');
for (var i = 0, len = span.length; i < len; i++) {
console.log(span[i].querySelector('span').click());
}

使用方法：在选择图标页面，按F12，打开调试模式——控制台，粘贴代码，回车即可

选择结束后，点击购物车——添加至项目——选择自己的项目，最后确认。

3、进入项目库，点击——查看在线链接

无代码可以点击生成。就可以看到代码了。

复制这段代码，备用。

三、wordpress引用unicode

进入wordpress后台，找到主题的style.css文件。在后面添加两段代码：

1、刚才复制的链接代码

/* CDN 服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
font-family: 'iconfont'; /* Project id 36****34 */
src: url('//at.alicdn.com/t/c/font_3638034_fp0qo20uim.woff2?t=1662*****4026') format('woff2'),
url('//at.alicdn.com/t/c/font_3638034_fp0qo20uim.woff?t=1662*****4026') format('woff'),
url('//at.alicdn.com/t/c/font_3638034_fp0qo20uim.ttf?t=1662*****4026') format('truetype');
}
/* 这里换成自己的链接代码 */

2、定义使用iconfont的样式：

.iconfont{
font-family:"iconfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;}
/* 这例代码都是一样的，直接添加即可。 */

四、挑选相应图标并获取字体编码，应用于页面
获取icon代码

例如菜单图标：添加位置：外观——菜单——导航标签，填入相应代码：

<i class="iconfont"></i> 友链

图例：

最终效果图：

总结：相比Font Awesome，阿里iconfunt网站个人用户最高可收藏2000个图标，所以就可以有2000种图标。可以满足绝大多数使用场景。