wordpress或网站中调用阿里巴巴矢量图标库引用图标教程

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

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

步骤:

1.图标库网址创建账户:https://www.iconfont.cn

2.选择图标管理,创建项目,如图

wordpress或网站中调用阿里巴巴矢量图标库引用图标教程

3.创建项目,创建的时候尽量不要用默认名称,都改成自己的不然会和柒比贰春哥调用的重复了,如图

wordpress或网站中调用阿里巴巴矢量图标库引用图标教程

4.选择你喜欢的图标,然后添加为购物车,再从顶部购物车按钮添加至您的项目

wordpress或网站中调用阿里巴巴矢量图标库引用图标教程wordpress或网站中调用阿里巴巴矢量图标库引用图标教程

5.生成第二步骤中提到的生成图标,生成后就得到了Font class单色和Symbol彩色的js代码和css代码。

wordpress或网站中调用阿里巴巴矢量图标库引用图标教程

引用步骤:

第一步:先引入需要调用的js和css代码,放在后台统计代码处就行

柒比贰后台-基本设置-代码统计里面

Font class单色调用css代码

<link rel="stylesheet" href="xxx.css">

Symbol彩色图标调用js代码

<script src="xxx.js"></script>

第二步:加入通用 CSS 代码(引入一次就行)此处当然是加入style.css里面(WordPress使用它的时候已经去掉了前面的style)

.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden; }

 

wordpress或网站中调用阿里巴巴矢量图标库引用图标教程

WordPress调用官方给的css代码直接用是不行的,要把开头的给去除掉才能正常调用

第三步:挑选相应图标并获取类名,应用于页面:

单色调用代码:

<span class="xu icon-xxx"></span>

” xu” 是你创建项目时候填写的 font-family。看下图(很重要)。忘记了可以通过编辑项目查看,后面的icon-xxx,直接复制图标代码替换就行。

wordpress或网站中调用阿里巴巴矢量图标库引用图标教程

彩色调用代码:

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

彩色和单色有点不同,直接替换icon-xxx就行,直接复制图标代码替换就行。

wordpress或网站中调用阿里巴巴矢量图标库引用图标教程

引用的效果图:

wordpress或网站中调用阿里巴巴矢量图标库引用图标教程

wordpress或网站中调用阿里巴巴矢量图标库引用图标教程

 

最后,有些地方调用彩色图标感觉图标小咋办在css文件的末尾加上font-size:17px  就好了。这个代码可以修改图标的大小,具体如下:

.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;font-size:17px}

给TA买糖
共{{data.count}}人
人已赞赏
网站建设

柒比贰首页美化教程,幻灯片下方精美UI布局

2020-9-18 17:08:32

网站建设

柒比贰美化:wordpress通用文章末尾版权提示框+本文结束图标

2020-9-18 17:14:20

  声明一下:我们只是一个资源分享平台,只负责收集资源,我们不保证下载资源的准确性、安全性和完整性,源码仅供下载学习之用。如用于商业用途,与本站无关!大部分资源请自行测试! 
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索