修改心得 / 教程工具

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

挽弦暮笙 · 4月23日 · 2021年 856次已读

创建矢量库

一、登录阿里巴巴矢量图标库,创建一个图标项目;【PS:FontClass/Symbol 前缀和Font Family必须为zm或者be,目前知道的就这两个,其余自测】

二、通过搜索自己需要的图标,加入到购物车;

三、把购物车里的图标添加到项目;

四、更新下代码,复制代码到后台——外观——主题选项——辅助功能——阿里图标库粘贴保存;

五、在后台外观——菜单——导航菜单复制图标代码粘贴保存;【PS:菜单没有CSS类(可选)在右上角顶部显示选项勾选CSS类】.

获取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对应图标代码

0 条回应