WordPress引用iconfont字体图标的两种方法详细教程

摘要:做设计的朋友,一般都知道iconfont这个网站,这是一个非常牛的字体图标网站,因为它的强大功能,很多wordpress主题开发者都引用了这个到主题。

以前我们主题引用图标,基本都是调用图片,这样非常麻烦,难以管理,现在主题调用图标,一般都引用font awesome和iconfont这两种,当然也还有其他几个图标网站,就不一一列举了,从方便角度来说,我觉得font awesome方便点,但是从完整度来说,iconfont更强大,图标非常齐全,今天给大家说的就是如果把这个iconfont集成到主题并使用。

在教程之前,我们先来了解下什么是iconfont。

一、了解iconfont

iconfont是阿里妈妈MUX倾力打造的矢量图标管理、交流平台。设计师将图标上传到Iconfont平台,用户可以自定义下载多种格式的icon,平台也可将图标转换为字体,便于前端工程师自由调整与调用。

  • iconfont上有数以百万计的图标(目前二百多万个图标),贡献者很多;
  • 你可以在Iconfont上选择自己喜欢的图标;
  • 你可以将喜欢的图标简单的运用到自己的网站上;
  • 你可以直接使用阿里的外链图标文件,速度很快,重要的是还支持httpss。

该网站目前可以直接使用微博和Github账户登录,很方便,点击进入https://www.iconfont.cn/

二、创建iconfont项目

iconfont图标不像其他图库,直接使用,他是需要你自己创建一个项目,然后把项目添加到主题,就可以随意使用了,项目支持多人同时编辑,这是延伸了,先看看怎么创建项目吧。

1.进入网页后,我们先登录账号,在首页我们可以看到一个搜索框,我们可以随便搜索图标,比如,我搜索“qq”,那么就会出现很多qq图标,选择你需要的,点击添加入库(小购物车标志)

2.重复上一步,不停的搜索图标,添加入库,直到你觉得足够你使用的时候为止,演示中我添加了9个,那么网站最右上角小购物车标志旁边就有一个9。

3.点击这个小购物车标志,就会弹出“添加至项目”、“下载素材”、“下载代码”,我们选择“添加至项目”,如果你有第一次来,那么就新建一个项目,然后添加进去。

到此,项目就已经添加成功了,接下来,引用到网站。

三、引用iconfont项目至网站

当我们项目添加好图标后,点击网站最上面菜单栏“图标管理”下“我的项目”,这时候就会跳到你刚添加的项目。

iconfont项目引用到网站,有三种方式,分别为“Unicode”、“Font class”、“Symbol”,第一个是最常见的方式,第二个是我个人比较喜欢的方式,第三个是功能最全的方式,但是兼容性不好,所以今天我就主要介绍第一、二两种引用方法,个人建议第二种。

1.利用unicode引用iconfont

如上图,我们点击unicode,再点击“查看在线链接”,就会弹出一段代码,我们需要把这段代码以及另一段额外的代码添加到你wordpress主题的css文件里,一般主题都是style.css文件,大致如下:

/*这段代码改成你自己的项目代码*/
@font-face {
  font-family: 'iconfont';  /* project id 1070301 */
  src: url('//at.alicdn.com/t/font_1070301_unkipoe9n78.eot');
  src: url('//at.alicdn.com/t/font_1070301_unkipoe9n78.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1070301_unkipoe9n78.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1070301_unkipoe9n78.woff') format('woff'),
  url('//at.alicdn.com/t/font_1070301_unkipoe9n78.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1070301_unkipoe9n78.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;
}

2.利用font class引用iconfont

如上图,我们点击font class,就会弹出一段css加载代码,我们把这段代码添加到主题的header.php里,或者通过我之前文章点此跳转的方法引用这段代码也可以,添加到header.php代码如下(href里的链接改成自己的项目链接):

<link rel='stylesheet'  href='https://at.alicdn.com/t/font_1070301_ojfxsne1w8.css' type='text/css'>

四、调用iconfont图标

1.如果你是用unicode引用的,那么调用方法就是

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

其中“&#xe646;”就是图标名称

2.如果你是font class引用的,那么调用方法就是

<i class="iconfont icon-qq"></i>

其中“icon-qq”就是图标名称

五、延伸说明

每次你添加新图标,或者删除老图标,也就是变更这个项目的时候,你都要重新获取下引用链接,然后更新到主题里,否则新添加的图标就无法显示。另外,告诉你我为什么推荐第二种,因为用第二种,看着舒服,而且名称前缀icon可以个性化自定义哦。

6
分享到:

评论2

请先

  1. #2
    :cy: 支持支持
    121638812019-07-15 19:32:49
  2. #1
    测试评论
    尊世@发票2019-08-03 11:09:39

WPBON主题 —— 匠心之作,一款良心的好主题

关于我们 在线咨询
没有账号? 忘记密码?

社交账号快速登录

社交帐号登录后,请去用户中心修改邮箱

WordPress引用iconfont字体图标的两种方法详细教程-海报

WPBON主题更新至V1.8

这是一条网站公告,可在后台开启或关闭,可自定义标题,内容,用户首次打开关闭后不再重复弹出,此处可使用html标签...

查看详情 WP帮·通知中心