WordPress教程:WordPress引入阿里巴巴矢量图标库彩色图标

释放双眼,带上耳机,听听看~!
昨晚发布了篇WordPress教程:7b2主题引入Iconfont-阿里巴巴矢量图标库方法,今天来个进阶的教程,对于小白来说

WordPress引入阿里巴巴矢量图标库彩色图标

获取JS代码

一、没有新建有阿里巴巴矢量图标库项目的参照知更鸟主题添加阿里巴巴矢量图标库方法文章步骤来新建项目;

二、此次需要使用到Symbol,复制JS代码:

  1. //at.alicdn.com/t/font_1126685_0dc7l0zgxsvr.js

引入JS代码

一、在当前主题目录funtions.php添加代码:

  1. function add_stylesheet_to_head() {
  2.     echo “\n<script type=’text/javascript’ src=’//at.alicdn.com/t/font_1126685_0dc7l0zgxsvr.js’></script>”;
  3. }

二、以上JS链接自行替换

添加css样式

在当前主题目录下的header.php文件中/head前添加以下样式:

  1. <style type=“text/css”>
  2. .icon {
  3.     width: 1em; height: 1em;
  4.     vertical-align: -0.15em;
  5.     fill: currentColor;
  6.     overflow: hidden;
  7. }
  8. </style>

添加彩色图标

一、在WordPress后台>外观>菜单>导航标签添加以下代码:

  1. <svg class=“icon” aria-hidden=“true”><use xlink:href=“#icon-Home”></use></svg>网站首页

二、其中class=”icon”对应FontClass/Symbol 前缀icon-Home对应图标代码

人已赞赏
WordPress教程

7b2主题改造之添加网易云歌单iframe播放器

2019-3-9 23:33:47

WordPress教程

WordPress教程:WordPress博客添加自定义鼠标样式

2019-4-4 23:28:46

4 条回复 A文章作者 M管理员
  1. 不可行,显示不出来

    • 审查元素看看

    • 我把funtions.php的代码放入b2主题设置常规设置的页脚html,headr.php的代码放入style.css,并且删掉第一行和最后一行后可以正常显示,不过图标比较大,然后我修改了widte和height,不过并没有改变大小,请问是哪里的问题

    • 新建css样式 svg.icon 可以参考我的

有新消息 消息中心
搜索