柒比贰7b2主题修改引入彩色阿里图标库

释放双眼,带上耳机,听听看~!

1.登录阿里图标:https://www.iconfont.cn,如果没有账号先注册,创建一个项目,项目名称随意,比如下图所示:

2.创建好项目以后,搜索自己需要的图标,添加入库(图标上的购物车),或者上传自己的图标入库。

3.添加完成后需要添加到项目,可以选择右上角的购物车图标,点击添加至项目。

4.找到我的项目,可以看到我们添加的图标

5.引入项目下面生成的 symbol 代码添加到7b2主题-常规设置-头部HTML标签中(每次添加更新图标时都要重新点击更新代码并替换)

<script src="你的阿里图库js代码"></script>

6.加入通用 CSS 代码到7b2的子主题style.css中

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

7.挑选相应图标并获取类名,添加到后台-外观-菜单中

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

8.#icon-xxx为你添加的项目图标名(#后边的代码)

9.大功告成请查看,记得清理一下缓存,有CDN的刷新一下

 

PS:原创制作不易留个言点个赞被,谢谢

人已赞赏
建站教程

WordPress开启memcached缓存

2020-6-7 9:35:25

建站教程

wordpress美化-7B2主题添加菜单角标

2020-6-9 19:51:12

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