WordPress使用彩色阿里巴巴iconfont图标库(精华版)

阿里图标库允许自定义图标,上面有非常丰富的图标。本教程展示如何使用他家的图标作为菜单图标。

使用彩色图标

创建项目

登录阿里图标

https://www.iconfont.cn

创建一个项目

创建好项目以后,就可以去添加自己需要的图标了,找打图标,点击添加到购物车

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

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

选择Symbol,生成一个链接,复制这个链接,就可以拿到WordPress里面使用了。

阿里巴巴给的JS代码为

//at.alicdn.com/t/font_859606_zk6ek3lk12i.js

这里我们要修改一下JS代码

 <script src="//at.alicdn.com/t/font_859606_zk6ek3lk12i.js">script>

我使用的是春哥的7B2主题所以我直接扔到了基本设置—统计代码里面

添加CSS阿里巴巴给我的CSS代码为

<style type="text/css">.icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
style>

这里我们也要修改一下修改成为以下

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

仍入子主题CSS文件即可

接下来就是引入彩色图标了

在后台找到菜单

引入菜单代码如下:

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

人已赞赏
建站教程

WordPress博客系统主题css美化彩字体闪

2019-8-28 13:18:35

建站教程

WordPress纯代码添加在线人数

2019-8-28 13:21:06

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