JustNews主题菜单添加彩色阿里图标

4.6
(7)

最近发现阿里的彩色图标也挺好看,当然我在16年的时候就用过阿里图标了,那时候还是用的Begin主题,默认不支持彩色图标。最近这段时间,看了下JustNews主题,竟然默认支持彩色图标,当然使用阿里图标的Symbol模式引入字体,就可以使用彩色图标。

JustNews主题菜单添加彩色阿里图标

阿里图标,即Iconfont字体图标,可以按需引用,即需要哪个图标,就添加哪个图标,不会产生太大的资源引入。所以,阿里图标更受站长们青睐。

今天,我们主要说下JustNews主题如何使用Iconfont图标,以下简称阿里图标。首先,点击打开阿里图标网址。然后,注册或登录账号,这里我直接用的新浪微博账号登陆了,方便快捷。

图标添加

接下来,直接开始搜索你想要的图标,比如首页这个图标:

JustNews主题菜单添加彩色阿里图标

找到你想要的图标,将鼠标移过去,点击第一个按钮,添加入库

JustNews主题菜单添加彩色阿里图标

按照上述步骤,添加你所需要的那些图标,当然以后你还可以添加图标。

接着,点击右上角购物车样子的那个按钮,点击添加至项目,如果没有项目,直接新建一个项目即可,最后确认添加。

JustNews主题菜单添加彩色阿里图标

JustNews主题阿里图标使用方法

当你添加完图标后,点击顶部的资源管理,下拉菜单点击我的项目。这里列出了你添加的所有图标,我们选择Symbol选项,点击生成链接,复制这个链接代码(js链接)

JustNews主题菜单添加彩色阿里图标

最后,再到JustNews主题设置界面,风格样式:图标设置那里,将复制的链接,粘贴到Iconfont选项里。

JustNews主题菜单添加彩色阿里图标

然后,我们再后台再编辑菜单,在各个菜单项目前添加如下代码:

<i class="wpcom-icon"><svg aria-hidden="true" class="icon-svg"><use xlink:href="#icon-shouye"></use></svg></i> 

即可在菜单名称前添加好图标,保存菜单就可以在前台看到菜单前多了彩色图标。

对于其他菜单,想要更换图标,请求购上述代码中的#icon-shouye字样即可。这个字样,在阿里图标项目管理,那里可以看到各个图标的代号,复制替换即可。

JustNews主题菜单添加彩色阿里图标

到此,Justnews主题的菜单图标设置教程就可以了。下面,我们再说下其他主题如何使用吧:

其他Wordpress主题怎么用阿里图标

这部分内容,JustNews主题无需查看

引入阿里的js,你需要在主题任意位置引用即可。最好是在head之间。

此外,你还需要引入如下CSS代码:

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

最后,在调用图标时,与justnews主题也有所不同,需要使用如下代码调用图标:

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

替换图标时,替换其中的xxx即可。

结果展示

当然,关于什么是彩色菜单图标,可以查看本站的菜单部分,下面给几张图展示下吧:

共计7人评分,平均4.6

到目前为止还没有投票~

很抱歉,这篇文章对您没有用!

让我们改善这篇文章!

告诉我们我们如何改善这篇文章?

原创文章,作者:古哥,如若转载,请注明出处:https://iymark.com/website/justnews-iconfont-new.html

发表评论

登录后才能评论
本站APP
本站APP
京东好物
分享本页
返回顶部
新年
快乐