0°

WORDPRESS使用ICONFONT字体图标

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">&#xeb1b;</i>

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

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

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

自己试试吧~

「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论