wordpress Autumn-Pro主题增加iconfont文字图标

Autumn-Pro主题是我目前在用的一款自媒体主题,其中有许多方便的功能,例如 文章聚合 小插件,广告位,讨论组等等,不过对于我这样的年轻人来说,最喜欢的就是花里胡哨了,主题内置的iconfont文字图标我很喜欢,奈何数量太少,不能满足我的欲望,便开始研究如何增加自定义iconfont图标,

废话不多说,下面开始教程。

我们找到主题目录下的 /static/fonts 目录,其中有八个文件,我们要替换的文件名字为 iconfont.css ,但是我们不能直接修改这个css文件,会破坏其编码结构,可能导致无法正常使用。

正题开始:

下载上面所说目录fonts文件夹里面的iconfont.svg文件,然后打开这个iconfont图标合并网站  icomoon  ,选择左上角的import icon 如图

然后选择刚刚保存的iconfont.svg文件,导入后会显示出文件里面所有的iconfont文字图标,如图

接下来点击上方导入按钮旁边的编辑按钮挨着选择每个图标单独导出或者选择自己想要留下的图标导出,记得点击单个文件,界面如下,选择download然后打开阿里云iconfont矢量图标网站,登陆创建自己的项目,具体创建项目教程见我的上一篇帖子 使用wpjam插件使用阿里巴巴iconfont图标库
然后倒入刚刚下载的图标文件,可以不用重命名。

接下来这一步就是比较重要的一步了

因为主题内部样式调用了一些图标,有利用Unicode调用(css伪元素调用)和 font class 调用,我们需要找到 相应的图标的十六进制代码,并将刚刚上传到阿里云矢量图标库的图标更改主题已经调用的图标相同的名称和十六进制代码,

目前已知的有icon-huoicon-yejianmoshiicon-taiyang_sun61icon-dianzan1icon-collectionicon-collection_fillicon-weixinicon-QQicon-fenxiang-tongyongicon-weidengluicon-xiaicon-guanfangicon-xiangyouicon-yixiangkanicon-xiangkanicon-shequicon-yibiaopanicon-shuaxinicon-pinglunicon-youxiangicon-rili

请将以上的图标十六进制与名称对应起来,在阿里云iconfont项目管理中修改成一样即可(注意!请先修改好十六进制与class名称,避免冲突),以后更新主题也比较方便,直接替换文件就好了。修改完成后,就可以在图标库中选择自己喜欢的图标添加进项目了,完成后选择下载到本地

将文件中的demo_index.html重命名为demo.html,

其中的js文件与json文件可以删除,接着替换主题目录/static/fonts中的所有文件即可,然后在需要使用的地方用

<span class="iconfont icon-xxx"></span>

调用就可以了,其中的xxx就是你的class名称,如<span class="iconfont icon-huo"></span>

我在菜单中调用后后效果如下

尽情使用吧!

原创文章,喜欢的话记得分享哦!

z1485671578

我是一个boy!!!爱折腾,wp新手司机,折腾blog纯属个人兴趣,分享个人经验,然后嘛,秀恩爱嘻嘻哼哼,其他的还没想好怎么写

相关推荐

1 条评论

  1. ggben

    这是新手司机能做出来的吗,我信你个鬼,好用,真香!( ,,´・ω・)ノ”(´っω・`。)

发表评论

您的电子邮件地址不会被公开,必填项已用*标注。

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

wordpress Autumn-Pro主题增加iconfont文字图标