wordpress顶部菜单导航引用阿里矢量图库教程

说明

最近弄了个资源网,在设置顶部菜单时,感觉顶部只有文字空点难看,域名就在没个菜单前面加了个矢量图。

教程

阿里巴巴的矢量图库的图标非常的多,引用起来也非常的方便。于是,这次就引用了阿里巴巴的矢量图库。

首先,打开官网:https://www.iconfont.cn/

之后登陆进去,只能采用新浪微博进行登陆。

登录后,点击图标管理下的我的项目

进去后,点击新建项目

在这里,我们对项目进行命名。项目名称、FontClass/
Symbol 前缀、Font Family根据自己的需要可以随意设置(请记住自己设置的Font Family,后面会用到)

之后到图标库选择自己需要的,添加到购物车里

点击自己喜欢的图标,添加进购物车里。在添加至刚才自己新建的项目

回到我的项目,获取在线链接

之后,将改css引用到主题目录下的header.php,将下面的代码放到<head></head>之间

<link rel="stylesheet" type="text/css" href="阿里云生成的Font class代码">

最后,回到wordpress的后台,在菜单设置里进行添加。

在导航标签里,采用以下代码进行填写

<span><i class="xs iconhome"></i> 网站首页</span>

将xs改为你刚才新建项目时设置的Font Family,iconhome就是图标的代码,网站首页就是对应的导航显示的文字

PS

看完教程不会还不会操作的可在下方评论区留言。

本文未经允许,禁止转载!

人已赞赏
博客杂志

wordpress找回管理员密码

2020-6-7 6:34:27

博客杂志

WordPress给分类目录设置游客权限

2020-7-14 13:16:54

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索