WORDPRESS使用ICONFONT字体图标

我就爱WORDPRESS

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

目前ICONFONT支持微博和GITHUB账户的直接登录,点此前往ICONFONT.CN

登录后,你会看到一个大大的搜索框,然后输入你想要的中文或者英文,比如你想要一个“首页”的图标,你可以直接搜索“首页”或者“房子”来查找。

每个图标上都有一个添加入库的购物车图标,只需点击这个图标即可将该图标收纳入库,如下图。

当你觉得收纳的图标足够了的时候,你可以点击页面右上角的购物车来添加至项目,没有项目的话可以创建一个项目。

然后你就来到了图标项目页,你可以看到刚刚选择的所有图标。

直接生成类似下图的代码,然后复制代码到你主题的STYLE.CSS文件中:

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

注:如果你想在导航菜单中加入图标,你需要将代码复制到菜单的导航标签中,比如你的导航文字原本是“首页”,现在你只需要在“首页”前面加上第三步的代码即可。

如果你想在文章中加入图标,你需要在编辑文章的时候切换成文本模式,将第三步的代码粘贴进去即可。

如果你想修改主题的代码并添加或者替换图标,你需要找到合适的位置来放置第三步的代码即可。

具体效果请如下图

自己试试吧~

本文由 我就爱WORDPRESS 作者:我就爱WORDPRESS 发表,其版权均为 我就爱WORDPRESS 所有,文章内容系作者个人观点,不代表 我就爱WORDPRESS 对观点赞同或支持。如需转载,请注明文章来源。
7
我就爱WORDPRESS

发表评论