柒比贰7b2主题菜单修改引入彩色阿里图标库

释放双眼,带上耳机,听听看~!

今天给大家介绍一下阿里图标库引用彩色图标的方法。

首先解释一下彩色图标是什么?又或者我们可以把彩色图标用在什么地方:

正如我们的网站所示:首页顶部菜单,文章分类菜单的彩色图标就是引用的字体图标。当然我是将字体图标下载下来引用然后修改css控制变色的,不算真正的彩色字体图标。下面我就来介绍一下彩色图标的运用:

使用步骤

1.登录阿里图标:https://www.iconfont.cn,如果没有账号先注册,创建一个项目,项目名称随意,比如下图所示:

柒比贰7b2主题菜单修改引入彩色阿里图标库-西柚乐

2.创建好项目以后,搜索自己需要的图标,添加入库(图标上的购物车),或者上传自己的图标入库。


柒比贰7b2主题菜单修改引入彩色阿里图标库-西柚乐

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

柒比贰7b2主题菜单修改引入彩色阿里图标库-西柚乐

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

柒比贰7b2主题菜单修改引入彩色阿里图标库-西柚乐

5.引入项目下面生成的 symbol 代码添加到7b2主题-常规设置-头部HTML标签中(每次添加更新图标时都要重新点击更新代码并替换)

<script src="你的阿里图库js代码"></script>

 

柒比贰7b2主题菜单修改引入彩色阿里图标库-西柚乐柒比贰7b2主题菜单修改引入彩色阿里图标库-西柚乐

6.加入通用 CSS 代码到7b2的子主题style.css中

/*阿里巴巴图标*/
svg.icon{
	width:1em;
	height:1em;
	margin-bottom:-2px;
}

柒比贰7b2主题菜单修改引入彩色阿里图标库-西柚乐

7.挑选相应图标并获取类名,添加到后台-外观-菜单中

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

柒比贰7b2主题菜单修改引入彩色阿里图标库-西柚乐

8.#icon-xxx为你添加的项目图标名(#后边的代码)

柒比贰7b2主题菜单修改引入彩色阿里图标库-西柚乐

9.大功告成请查看,记得清理一下缓存,有CDN的刷新一下

柒比贰7b2主题菜单修改引入彩色阿里图标库-西柚乐

最后修改: 2020-08-21 04:34

人已赞赏
WordPress教程

移除WordPress站点健康的仪表盘小工具、菜单以及邮件通知

2020-7-7 11:06:01

WordPress教程

WordPress网站使用WP Super Cache缓存插件提速

2020-7-9 11:41:08

免责声明

本站资源大多来自网络,如有侵犯你的权益请联系管理员Ciyol 或给邮箱发送邮件 admin@ciyol.cn 我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业途径!请在下载24小时内删除!


如果遇到评论下载的文章,评论后刷新页面点击对应的蓝字按钮即可跳转到下载页面本站资源少部分采用7z压缩,为防止有人压缩软件不支持7z格式,7z解压,建议下载7-zip(点击下载),zip、rar解压,建议下载WinRAR(点击下载)

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