图标字体iconfont的使用
什么是iconfont?
iconfont就是字面上的意思,叫做“字体图标”,将一套图标集以字体文件的形式封装,并通过 CSS 的 @font-face 作为 Web Font 调用。
iconfont的好处是什么
众所周知,以往我们图片大多是用png。但是png在使用过程中却有众多不变之处,譬如每个图片都是一个请求,当网页图片较多时,会比较影响加载的速度,不同分辨率的手机,为了响应式的展示页面,可能加有2倍图、3倍图等,使需要加载的资源变多,影响网页的性能。
那么iconfont的好处有哪些呢:
- 轻量性:一个图标字体比一系列的图像(特别是在Retina屏中使用双倍图像)要小。一旦图标字体加载了,图标就会马上渲染出来,不需要下载一个图像。可以减少HTTP请求,还可以配合HTML5离线存储做性能优化。每个小图标只有几kb,大大节省了加载时间。
- 灵活性:图标字体可以用过font-size属性设置其任何大小,还可以加各种文字效果,包括颜色、Hover状态、透明度、阴影和翻转等效果。可以在任何背景下显示。
- 兼容性:网页字体支持所有现代浏览器,包括IE低版本。详细兼容性可以点击这里。
- 可缩放,可以很方便的改变图标的大小。不用担心不同分辨率的设备上展示差异问题。
- 矢量,iconfont 是矢量的并且具有独立的分辨率,不管在高分辨率还是低分辨率,不管是在网页还是手机端,都具有很好的展示效果,不会出现锯齿或者马赛克模糊。
如何使用iconfont
第一步:
下载所需图标的svg文件
第二步
打开iconfont 点击IcoMoon App,再点击Import Icons 将刚才下载的svg文件导入
第三步
选中之后 点击Generate Font
第四步
点击Download下载
上面完成了svg转为iconfont,你也可以在iconfont下载自己自己所需的图标字体
下面说一下如何引入到自己的项目中
- 将下载的icomoon文件解压缩,将icomoon里面的font文件夹放进项目的src/assets/ 目录下,style.css放进src/assets/styles 目录下
- 将style.css中对应的代码路径调整正确
- 在main.js中引入css:import './assets/styles/style.css'
- 在代码中想引入对应图标只需写上style.css中对应的class名称如
<span class="icon-add-people"></span>
注:如不清楚对应的类名,可参照下载包icomoon中的demo.html。在网页中打开此文件即可。
图标字体iconfont的使用的更多相关文章
- 图标字体(IconFont)制作
图标字体(IconFont)介绍 图标字体(IconFont)现在越来越被广泛使用,大大提高了网页的多样化,解决了视网膜屏幕失真的问题. 据说微软从IE4开始支持的这个私有方法(@font-face) ...
- CSS高级技巧 图标字体ICONFONT的使用方法视频
图标字体 iconfont 这是一种字体,它跟svg 有很大 相似点 它是矢量的,放大缩小不失真的.很且很小. 我们把它成字看来. 字体 在 从ie4就开始支持的. 兼容性很好 唯一麻烦的地方 ...
- 仿站技术——获取和使用某些网站的iconfont图标字体
前言: 很多前端新手在仿一些大型网站的时候经常遇到一个问题:该网站使用了图标字体——iconfont,虽然现在阿里有开源的iconfont库,但是还是没有原网站的效果(本人强迫症但非处女座).所以此文 ...
- iOS中iconfont(图标字体)的基本使用
前言 近日在做项目时,项目组有提出iconfont的技术,便开始查询相关资料.iconfont技术的主要目的是为减少应用体积而生.首先icon代表图标 font代表字体.此技术便是将图标转化为字体,从 ...
- iconfont 图标字体
iconfont 技术的主要是将图标转化为字体来减少应用体积.如需在项目中使用iconfont技术,图标矢量图一开始都应合并转化为字体库. 优点: 减小体积,字体文件比图片要小 图标保真缩放,解决 ...
- !!字体图标(iconfont、Fontello 、雪碧图生成工具。Glyphicons、fontawesome 等)。 图片压缩
http://www.iconfont.cn/ 阿里巴巴矢量图标库 iconfont http://fontawesome.io fontawesome图标 http://www.bootcss.c ...
- CSS 小结笔记之图标字体(IconFont)
本篇主要介绍一种非常好用的图标大法——图标字体(IconFont). 什么是图标字体?顾名思义,它是一种字体,只不过这个字体显示的并不是具体的文字之类的,而是各种图标. 网站上经常会用到各种图标,之前 ...
- WPF使用矢量字体图标(阿里巴巴iconfont)
原文:WPF使用矢量字体图标(阿里巴巴iconfont) 版权声明:本文为博主原创文章,转载请注明出处. https://blog.csdn.net/lwwl12/article/details/78 ...
- (原创)IconFont(矢量图标字体)在Winform中的应用
一.前言 很多时候,使用矢量图形可以带来非常美观的界面效果,比如SVG的使用.但是Winform原生是不支持显示SVG图像的,所以退而求其次,可以使用IconFont来实现相似的矢量效果. 先来个图解 ...
随机推荐
- 【转】学习apicloud和IOS之间的模块化使用
最近公司有使用APICloud发开的需求,需要我这边提供一些模块包得封装.因为没有也是刚接触APICloud,所以也就在看官方文档 .下面讲一讲我再使用过程中得一点点东西. 首先,下载官方SDK,下载 ...
- JavaScript 获取对象中第一个属性
使用 Object.keys(object) 可以取出属性名为数组,但会打乱顺序 严格意义上对象中是只有映射关系而没有顺序的,但是在存储结构里是有顺序的,如果想获取存储结构里的第一个属性可以使用for ...
- JavaScript onkeydown事件入门实例(键盘某个按键被按下)
JavaScript onkeydown 事件 用户按下一个键盘按键时会触发 onkeydown 事件.与 onkeypress事件不同的是,onkeydown 事件是响应任意键按下的处理(包括功能键 ...
- SC || Chapter7 健壮性和正确性
finally中语句不论有无异常都执行 若子类重写了父类方法,父类方法没有抛出异常,子类应自己处理全部异常而不再传播:子类从父类继承的方法不能增加或更改异常 判断checked和unchecked: ...
- DROP LANGUAGE - 删除一个过程语言
SYNOPSIS DROP [ PROCEDURAL ] LANGUAGE name [ CASCADE | RESTRICT ] DESCRIPTION 描述 DROP LANGUAGE 将删除曾注 ...
- java8关于LocalDate,Date
关于java8中的新的时间日期类 public static void main(String[] args) { Date date = new Date(); LocalDate localDat ...
- cocos2dx通过ndk编译c++库
ndk编译c++库,然后通过jni调用实现重要代码封装,是安卓应用中最常用的技术,一方面可以将重要的代码实现隐藏,防止泄漏,也可以提高打包速度. ndk里面的sample文件夹中有很多实用的例子,其中 ...
- 几种排序算法的比较转自http://blog.csdn.net/keenweiwei/article/details/3697452
1冒泡排序: 已知一组无需数据a[1],a[2],a[3],a[4],a[5][a[n],将其按升序排列,首先找出这组数据中最大值,将a[1]与a[2]比较,若a[1]大,则交换两者的值,否则不变,在 ...
- python从列表中删除相邻重复元素
这里以一个栗子来用三种方法实现,输入a=['1','1','2','2','1','1'],输出b=['1', '2', '1'] 方法一: list1 = ['] def del_adjacent( ...
- python2和python3中filter函数
在python2和python3中filter是不同的,其中在python2中filter返回的是一个list,可以直接使用 >>> a = [1,2,3,4,5,6,7] > ...