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. 不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站概不负责!

4. 本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。

5. 如果您喜欢该内容,请支持正版内容,购买注册,得到更好的正版服务。如有侵权请邮件与我们联系处理。

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

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

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

9. 如遇到加密压缩包,默认解压密码为www.qiuyegen.com,如遇到无法解压的请联系秋叶源码网管理员!
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论
在线留言 开通会员 积分获取 积分素材
官方客服
  • 官方客服:550601163一键联系
  • 扫一扫加站长微信
    官方QQ群 加群领取福利