0°

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

WordPress使用彩色阿里巴巴iconfont图标库

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

WordPress使用彩色阿里巴巴iconfont图标库

使用彩色图标

创建项目

登录阿里图标

https://www.iconfont.cn

创建一个项目

WordPress使用彩色阿里巴巴iconfont图标库

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

WordPress使用彩色阿里巴巴iconfont图标库

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

WordPress使用彩色阿里巴巴iconfont图标库

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

WordPress使用彩色阿里巴巴iconfont图标库

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

WordPress使用彩色阿里巴巴iconfont图标库

阿里巴巴给的JS代码为

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

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

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

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

WordPress使用彩色阿里巴巴iconfont图标库

添加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文件即可

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

WordPress使用彩色阿里巴巴iconfont图标库

效果如下

WordPress使用彩色阿里巴巴iconfont图标库

在后台找到菜单

WordPress使用彩色阿里巴巴iconfont图标库

引入菜单代码如下:

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

好啦教程到此结束,网上有很多类似教程,可是不是收费的收费我想知道一个图标引入有啥收费的这么饥渴吗?

还有一些教程根本不能实现!详细教程也不说真让人无语!

好了这个教程是我根据一些教程自己修改的教程结束详细大家!

WordPress使用彩色阿里巴巴iconfont图标库
「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!

1. 本站所有资源来源于站长购买,如有侵权请邮件联系站长!

2. 分享目的仅供大家学习和交流,本站概不负责!请不要用于商业用途!

3. 如果你也有好源码,可以投稿发布,分享有U币奖励和额外收入!

4. 本站提供的源码,教程等等其他资源,都不包含技术服务 请大家谅解!

5. 如有链接无法下载、失效或广告,请点击下面字体→到投诉版块区举报,可领回失去的金币,并额外有奖!

6. 如遇到加密压缩包,默认解压密码为www.qiuyegen.com,如遇到无法解压的请联系秋叶源码网管理员!
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论