JustNews主题菜单添加彩色阿里图标 | 您所在的位置:网站首页 › 阿里iocn › JustNews主题菜单添加彩色阿里图标 |
文章目录 展开 图标添加JustNews主题阿里图标使用方法其他Wordpress主题怎么用阿里图标结果展示 4.6 (7)最近发现阿里的彩色图标也挺好看,当然我在16年的时候就用过阿里图标了,那时候还是用的Begin主题,默认不支持彩色图标。最近这段时间,看了下JustNews主题,竟然默认支持彩色图标,当然使用阿里图标的Symbol模式引入字体,就可以使用彩色图标。 阿里图标,即Iconfont字体图标,可以按需引用,即需要哪个图标,就添加哪个图标,不会产生太大的资源引入。所以,阿里图标更受站长们青睐。 今天,我们主要说下JustNews主题如何使用Iconfont图标,以下简称阿里图标。首先,点击打开阿里图标网址。然后,注册或登录账号,这里我直接用的新浪微博账号登陆了,方便快捷。 图标添加接下来,直接开始搜索你想要的图标,比如首页这个图标: 找到你想要的图标,将鼠标移过去,点击第一个按钮,添加入库 按照上述步骤,添加你所需要的那些图标,当然以后你还可以添加图标。 接着,点击右上角购物车样子的那个按钮,点击添加至项目,如果没有项目,直接新建一个项目即可,最后确认添加。 JustNews主题阿里图标使用方法当你添加完图标后,点击顶部的资源管理,下拉菜单点击我的项目。这里列出了你添加的所有图标,我们选择Symbol选项,点击生成链接,复制这个链接代码(js链接) 最后,再到JustNews主题设置界面,风格样式:图标设置那里,将复制的链接,粘贴到Iconfont选项里。 然后,我们再后台再编辑菜单,在各个菜单项目前添加如下代码: 即可在菜单名称前添加好图标,保存菜单就可以在前台看到菜单前多了彩色图标。 对于其他菜单,想要更换图标,请求购上述代码中的#icon-shouye字样即可。这个字样,在阿里图标项目管理,那里可以看到各个图标的代号,复制替换即可。 到此,Justnews主题的菜单图标设置教程就可以了。下面,我们再说下其他主题如何使用吧: 其他Wordpress主题怎么用阿里图标这部分内容,JustNews主题无需查看 引入阿里的js,你需要在主题任意位置引用即可。最好是在head之间。 此外,你还需要引入如下CSS代码: .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; }最后,在调用图标时,与justnews主题也有所不同,需要使用如下代码调用图标: 替换图标时,替换其中的xxx即可。 结果展示当然,关于什么是彩色菜单图标,可以查看本站的菜单部分,下面给几张图展示下吧: 共计7人评分,平均4.6分 到目前为止还没有投票~ 很抱歉,这篇文章对您没有用! 让我们改善这篇文章! 告诉我们我们如何改善这篇文章? 原创文章,作者:古哥,转载需经过作者授权同意,并附上原文链接:https://iymark.com/articles/1201.html |
CopyRight 2018-2019 实验室设备网 版权所有 |