【网站美化】WordPress调用阿里巴巴矢量图标库美化菜单栏图标教程

介绍：

想和奇妖网一样美化自己的菜单栏吗？今天小编微尘来带给大家详细的教程。

教你如何调用阿里巴巴矢量图标库来美化自己的网站。

1.打开阿里巴巴矢量图标库的网站，去注册账号，这里不多介绍

阿里巴巴矢量图标库直达车：点击直达

2.搜索你想要的图标，比如电脑，美食，花花，曹操。

3.找到喜欢的图标后，点击那个图标，点击购物车，然后添加到项目（没有项目的随便创一个）

4.然后找到资源管理–我的项目–下载至本地。

5.在服务器创建一个放图标的文件夹，比如我起名叫alitubiao，前面下载的上传上去然后解压出来。

6.解压出来后，自己根据情况移动文件，直接把里面的东西移动到你创建的图标文件夹。

7.注意上图的demo_index.html文件，访问你的域名/你的图库文件夹名/demo_index.html  ,打开就是你引入好的图标库了

8.引入教程

第一步：引入项目下面生成的 symbol 代码：

<script src="./iconfont.js"></script>

第二步：加入通用 CSS 代码（引入一次就行）：

<style>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

第三步：挑选相应图标并获取类名，应用于页面：

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

9.WordPress博客怎么引入呢？复制上面第一步的代码到主题文件header.php（主题页眉里），把js引入

详细路径：/wp-content/themes/你的wp主题文件夹/header.php

引入js代码实例（这是以我网站为准的，你上面创建的图标文件夹名字是哪个就改成哪个）：

<script src="/alitubiao/iconfont.js"></script>

加入css代码，这个去WordPress博客后台—外观—自定义—-填到额外CSS里：

<style>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

图：

10.教程到这里就基本结束了，直接把下面的代码填到你的网站菜单里就行了，下面放调用代码演示

注意：是填到文字前面。

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

11.上面的如果已经操作完了，这里的就不需要看了，这是一个懒人用法，几乎适合大部分的主题，一秒搞定，下面放b2的演示

PS：想看就评论，不要白嫖，有条件的可以点点赞赏，下面放演示