WordPress给顶部菜单添加字体图标,让菜单看起来更生动!

常见字体图标库

选择并添加图标

今天我们要使用的是iconfont,也就是阿里巴巴矢量图标库。

文章目录

进入该网站后搜索想要的图标,点击购物车

WordPress给顶部菜单添加字体图标,让菜单看起来更生动!

添加后再点击右侧的购物车图标,选择添加至项目。

WordPress给顶部菜单添加字体图标,让菜单看起来更生动!

如果没有项目就选择创建,项目名称随便取

WordPress给顶部菜单添加字体图标,让菜单看起来更生动!

使用字体图标

有两种方式,这里我们演示本地文件方法

网络文件

点击更新代码,然后复制js外链到主题中,有能力的自行操作,这里不做演示

本地文件

进入我的项目,选择下载至本地

WordPress给顶部菜单添加字体图标,让菜单看起来更生动!

将下载的所有文件解压放在主题目录/user/iconfont下,直接覆盖即可。

然后回到我的项目选择预览字体,黑白选择Font class,彩色选择Symbol,本主题就是Symbol。

WordPress给顶部菜单添加字体图标,让菜单看起来更生动!
WordPress给顶部菜单添加字体图标,让菜单看起来更生动!

可以看到需要引入相应的文件,不过主题已经写好了引入代码,无需再引用

直接进行第三步,挑选图标!

将这段代码复制到菜单设置的导航标签里

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>
WordPress给顶部菜单添加字体图标,让菜单看起来更生动!

#icon-xxx替换成你想要的图标类名,然后菜单名称放在</svg>后面即可

WordPress给顶部菜单添加字体图标,让菜单看起来更生动!
WordPress给顶部菜单添加字体图标,让菜单看起来更生动!

原创文章,作者:qqniu,如若转载,请注明出处:https://qqniu.com/522.html

(0)
qqniuqqniu
上一篇 2022-11-08
下一篇 2022-11-08

相关推荐

发表回复

登录后才能评论