Under the bodhi tree

wordpress调用Iconfont图标

WP开发 阅读 27 0 评

Iconfont字体图标在设计中被广泛应用,在网站中也是必不可少的,恰当的使用可以让网站更加美化可观。今天这篇文章介绍的iconfont使用教程,恰巧也是我在修改主题时用到的,操作过程简单,相信只要阿里不倒,或是iconfont项目不撤,这套方法还是比较有使用寿命的。

步骤一

登录iconfont官网,通过搜索栏找到自己喜欢的图标,点击在弹出来的图表,添加到购物车。

步骤二

添加完成之后,购物车内就有你选择的图标个数,例如我添加了35的图标,点击进去,购物车图标,会弹出下图内容,可以将这些图标添加到项目。没有项目的还可以新建一个。

步骤三

添加至项目之后,会跳转到你的项目面板。我新建的名称为icoo名字的项目。点击font class按钮,会出现该项目的在线代码,同时也会列出你所有的图标。复制这段代码,以作后用。

步骤四

添加调用代码。在WordPress主题的头部</head>区域添加下面调用代码:

<link rel=”stylesheet” href=”https://at.alicdn.com/t/font_2136971_uz0fr8xexqa.css” rel=”external nofollow” />

这行代码的地址就是你自己刚才生成的代码地址。如果你在这之后又添加了新的iconfont图标,要记得更新这个库,更新之后地址也会随之更新。

步骤五

然后使用代码即可:

<span><i class=”iconfont icon-twitter”></i></a>或 <span class=”iconfont icon-xxx”></span>

如,我要调用设置图标,他的id就是setting,也就是如下:

<span><i class=”iconfont icon-setting”></i></a>或 <span class=”iconfont icon-setting”></span>

最终效果

< 上一篇

你的留言