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图标库

版权免责声明

本资源仅用于个人学习测试使用,禁止用于任何商业环境,请于下载后24小时内删除本资源!

本文所有相关技术/资源内容统一放在下载包里

  1. 1、本网站名称:秋叶资源网
  2. 2、本站永久网址:https://www.qiuyegen.com
  3. 3、每日签到、评论、点赞、投稿可获得大量积分,用于免费兑换网站内容。(由于模板不是很完善签到需刷新才能签到!)
  4. 4、如果您觉得本站有帮助到您,也想给本站一些帮助。您可以再下方打赏本站。
  5. 5、本站资源来源于互联网收集/个人购买,如有侵犯到您的权益,请查看【版权声明】
  6. 6、本站提供的所有资源均来自互联网搜索,站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业环境,任何人不得擅作它用,否则后果自负!请在下载24小时内删除!为尊重作者版权,请购买原版作品,支持你喜欢的作者,谢谢!
  7. 7、本站资源大多存储在云盘,如发现链接失效 【链接失效】 我们会第一时间更新。本站提供的源码、模板、软件工具等其他资源各类资源,都不包含技术服务 请大家谅解!

人已赞赏
2 条回复 A文章作者 M管理员
  1. 头像

    良心

个人中心
今日签到
有新私信 私信列表
有新消息 消息中心
搜索