前言

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

准备工作：

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中复制出来的代码，保存刷新页面即可看到~