阿里巴巴矢量图标库 iconfont 的使用方法

boyanx3个月前技术教程17

xx-blog主题使用的图标库是阿里巴巴的iconfont,因此这里介绍一下此主题库的用法。

首先去iconfont主题库,注册一个账号,然后就可以找自己喜欢的图标了,找到后点击添加购物车,就回到了右侧的购物车中,然后去个人中心下载即可。

第一步:将代码加到xx-blog主题style.css中

/* 引用字体文件(注意url中文件的路径)format告诉浏览器这些字体文件以什么格式解析 */

@font-face {

font-family: 'iconfont';

src: url('iconfont.eot');/* IE9*/

src: url('iconfont.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */

url('iconfont.woff') format('woff'),/* chrome, firefox */

url('iconfont.ttf') format('truetype'),/* chrome, firefox, opera, Safari, Android, iOS 4.2+*/

url('iconfont.svg#iconfont') format('svg');/* iOS 4.1- */

}

第二步:定义使用 iconfont样式

.iconfont{

font-family:"iconfont" !important;

font-size:16px;font-style:normal;

-webkit-font-smoothing: antialiased;

-webkit-text-stroke-width: 0.2px;

-moz-osx-font-smoothing: grayscale;

}

第三步:选择样式图标加入

<i class="iconfont icon-xing"></i>

这样就可以在主题中使用自己定义的样式了。

相关文章

阿里矢量图标库iconfont又出新功能啦~插画库

一睹为快阿里插画库简介全新的插画库模块在 ICON 「 ONT 上线啦~为了满足不同的用户需求。插画、 icon 更多的矢最图形在平台上展现和应用于更广的场景。插画库是一系列相关插画的集合,由绘制插画...

Office 自定义功能区开发中自定义按钮的图标

在office开发中,我们经常会通过自定义功能区的方式进行二次开发,比如请看一下笔者开发的一个日常使用的公文格式处理小功能如下:今天,我们就来给大家讲解一个如何给所开发的按钮设置图标哟。大家应该都知道...

矢量素材∣推荐6个质量极高可以免费下载矢量图的网站!

#挑战30天在头条写日记#免费的矢量图网站对于设计师来说是非常有用的资源,可以帮助他们快速找到合适的矢量图,提高设计质量和效率,同时也可以促进创意和想法的分享和交流。为了方便大家,小编对6个完全免费矢...

零基础教你学前端——43、初识SVG

解决网站图标问题的最佳方案——SVG!SVG 是一种基于 XML 语法的图像格式,英文全称是: Scalable Vector Graphics,即可缩放矢量图,是 W3C 的一项建议。我们用手机拍摄...

想要制作微课吗?今天给你微课制作必备工具

想要制作微课,软件太多怎么办?不用担心,我来教你选一、软件必备系列1、万彩动画大师万彩动画大师是一款动画制作软件,该软件提供了大量的素材,更为重要的是包括了大量的可商用素材(不用害怕涉嫌抄袭哦……)。...

iconfont,像使用字体一样使用图标

在iOS项目中,一般对图片资源要求有@2x,@3x两套,以适配不同分辨率的设备。对于有换肤需求的APP来说,还需要多套图来匹配不同的主题。这样不但无形中增加了开发者和设计者的工作量,而且会增大APP的...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。