昨晚发布了篇WordPress教程:7b2主题引入Iconfont-阿里巴巴矢量图标库方法，今天来个进阶的教程，对于小白来说
获取JS代码
一、没有新建有阿里巴巴矢量图标库项目的参照知更鸟主题添加阿里巴巴矢量图标库方法文章步骤来新建项目；
二、此次需要使用到Symbol，复制JS代码：
- //at.alicdn.com/t/font_1126685_0dc7l0zgxsvr.js
引入JS代码
一、在当前主题目录funtions.php添加代码:
- function add_stylesheet_to_head() {
- echo "\n<script type='text/javascript' src='//at.alicdn.com/t/font_1126685_0dc7l0zgxsvr.js'></script>";
- }
二、以上JS链接自行替换
添加css样式
在当前主题目录下的header.php文件中/head前添加以下样式:
- <style type="text/css">
- .icon {
- width: 1em; height: 1em;
- vertical-align: -0.15em;
- fill: currentColor;
- overflow: hidden;
- }
- </style>
添加彩色图标
一、在WordPress后台>外观>菜单>导航标签添加以下代码:
- <svg class="icon" aria-hidden="true"><use xlink:href="#icon-Home"></use></svg>网站首页
二、其中class="icon"对应FontClass/Symbol 前缀，icon-Home对应图标代码
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。