WordPress导航栏图标

前言

好多小伙伴看到网站的导航栏旁边有小图标觉得很好看,那么今天我特地出一个教程和大家说一下如何操作的~、

准备工作:

1、进入到 iconfont 官网进行注册账号

2、登录成功之后会有一个搜索框,这个就要看你自己想要什么样的图标了,比如可以搜索:首页。

教程

1、鼠标放入每个图标都会有三个按钮(自上到下):添加入库、收藏、下载

2、我们选择收藏入库

3、每收藏入库一个图标,导航上的收藏入库的数量就会+1

4、选择好自己喜欢的图标之后,点击顶部导航的购物车图标

5、将选择好的图标添加至项目(没有的话可以新建一个项目)

6、点击导航中的资源管理-》我的项目 就会看到自己选择的图标

第一步:引入js和css

在图标项目页中选择 Symbol 你会看到一串js 和css ,将这段代码放到您网站的header头中就可以啦

<!-- iconfont start -->
  <script src="您获取的js放入在此" /></script>
  <style>
    .icon {
      width: 1em;
      height: 1em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
    }
    </style>
  <!-- iconfont end -->

第二步:复制相应的图标代码

这个就比较简单了,在项目中选择图标,会显示出复制代码 点击复制即可

您复制的代码举例如下:icon-SmartHome

第三步:配置

网站后台—>外观—>菜单—>导航名称 填入以下代码

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

其中 xlink:href=”#icon-SmartHome” 的 icon-SmartHome 就是在iconfont中复制出来的代码,保存刷新页面即可看到~

© 版权声明
THE END
喜欢就支持一下吧
点赞84赞赏 分享
评论 抢沙发
头像
欢迎光临不念博客,留下您的想法和建议,祝您有愉快的一天~
提交
头像

昵称

取消
昵称代码图片

    暂无评论内容