当前位置:舒夏博客 > WordPress > 正文

作者:舒夏

手机扫码查看

标签:

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

WordPress引入阿里巴巴矢量图标库彩色图标
获取JS代码
一、没有新建有阿里巴巴矢量图标库项目的新建项目;

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

//at.alicdn.com/t/font_1117396_kjuqyx7zsr.js

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

function add_stylesheet_to_head() {
    echo "\n<script type='text/javascript' src='//at.alicdn.com/t/font_1117396_kjuqyx7zsr.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-bixin"></use></svg>微语

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

未经允许不得转载:

作者:舒夏, 转载或复制请以 超链接形式 并注明出处 舒夏博客
原文地址:《WordPress教程:WordPress引入阿里巴巴矢量图标库彩色图标》 发布于2020-01-08

分享到:
赞(1) 打赏

评论 抢沙发

7 + 1 =


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

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

Vieu3.3主题

专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。

了解一下

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录