WordPress引用阿里巴巴矢量图标库[彩色图标]

前言

现在大部分博客图标都采用Font Awesome图标库,因为Font Awesome图标库满足了大部分用户的需求了,但做为喜欢花里胡哨的我们是不够的,Font Awesome图标库的图标不仅没有彩色的图标,个性化的图标还有点少!所以对于我们喜欢彩色的菜单图标选择性很少!所以只能引入其他的矢量图标库,今天我就分享一下WordPress引用阿里巴巴矢量图标库的彩色图标。

阿里巴巴矢量图标库是由阿里巴巴体验团队倾力打造的中国第一个最大且功能最全的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能,是设计师和前端开发的便捷工具。在这里你可以找到各种各样的图标并免费使用。那么,该如何给自己的wordpress博客加上阿里巴巴矢量图标库的图标呢?

阿里巴巴矢量图标库网址:

传送地址点我

食用方法

第一步:阿里巴巴矢量图标库官网 —> Github或者新浪微博登录

略过

第二步:然后自己通过搜索框找到自己喜爱的图标并添加至购物车 —> 添加至项目 //没有项目的自己新建项目

第三步:跳转到我的项目 页面(没有跳转的点击–>资源管理–>我的项目)//我的项目自己创建名字

第四步:在 我的项目 页面有一下按钮—>一般选 Symbol

Unicode Font class Symbol

第五步:点击 –> 查看在线链接(没有的的话可以点击生成链接) —>点此复制代码(代码例如下面)

//at.alicdn.com/t/font_2101832_j448m0ggtp.js

第六步:引入JS代码

在当前主题设置—>自定义JS代码 添加下面代码:(下面src=”这里是上面的JS代码,自行替换”)

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

第七步:添加css样式

在当前主题设置 –> 自定义CSS代码 或者目录下的 header.php 文件中适当位置添加以下代码:(不适用的,自行调整宽度)

<style type="text/css">
.icon {

width1emheight1em;

vertical-align: -0.15em;

fill: currentColor;

overflow: hidden;

}
</style>

第八步:添加彩色图标

一、在WordPress后台—> 外观 —> 菜单 —> 导航标签 添加以下代码:

<svg class="icon fa-spin" aria-hidden="true"><use xlink:href="#iconziyuan"></use></svg> 文章分类

二、上面的 iconziyuan 对应图标代码 //就是图库下面的图标名称

 

给TA买糖
共{{data.count}}人
人已赞赏
Wordpress教程教程分享

WordPress / Typecho 添加文章美化框,文本输入自动美化

2020-12-7 11:47:55

Wordpress教程教程分享

新手网站SEO优化操作流程汇总

2020-12-21 17:24:47

免责声明 本站所有资源均来源于互联网,如有侵权请联系站长!将第一时间删除
资源仅供学习参考,请勿商用或其它非法用途,否则一切后果用户自负!
本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索