什么是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的使用的更多相关文章

  1. 图标字体(IconFont)制作

    图标字体(IconFont)介绍 图标字体(IconFont)现在越来越被广泛使用,大大提高了网页的多样化,解决了视网膜屏幕失真的问题. 据说微软从IE4开始支持的这个私有方法(@font-face) ...

  2. CSS高级技巧 图标字体ICONFONT的使用方法视频

    图标字体  iconfont 这是一种字体,它跟svg 有很大 相似点   它是矢量的,放大缩小不失真的.很且很小. 我们把它成字看来. 字体 在 从ie4就开始支持的.  兼容性很好 唯一麻烦的地方 ...

  3. 仿站技术——获取和使用某些网站的iconfont图标字体

    前言: 很多前端新手在仿一些大型网站的时候经常遇到一个问题:该网站使用了图标字体——iconfont,虽然现在阿里有开源的iconfont库,但是还是没有原网站的效果(本人强迫症但非处女座).所以此文 ...

  4. iOS中iconfont(图标字体)的基本使用

    前言 近日在做项目时,项目组有提出iconfont的技术,便开始查询相关资料.iconfont技术的主要目的是为减少应用体积而生.首先icon代表图标 font代表字体.此技术便是将图标转化为字体,从 ...

  5. iconfont 图标字体

    iconfont 技术的主要是将图标转化为字体来减少应用体积.如需在项目中使用iconfont技术,图标矢量图一开始都应合并转化为字体库.   优点: 减小体积,字体文件比图片要小 图标保真缩放,解决 ...

  6. !!字体图标(iconfont、Fontello 、雪碧图生成工具。Glyphicons、fontawesome 等)。 图片压缩

    http://www.iconfont.cn/  阿里巴巴矢量图标库 iconfont http://fontawesome.io fontawesome图标 http://www.bootcss.c ...

  7. CSS 小结笔记之图标字体(IconFont)

    本篇主要介绍一种非常好用的图标大法——图标字体(IconFont). 什么是图标字体?顾名思义,它是一种字体,只不过这个字体显示的并不是具体的文字之类的,而是各种图标. 网站上经常会用到各种图标,之前 ...

  8. WPF使用矢量字体图标(阿里巴巴iconfont)

    原文:WPF使用矢量字体图标(阿里巴巴iconfont) 版权声明:本文为博主原创文章,转载请注明出处. https://blog.csdn.net/lwwl12/article/details/78 ...

  9. (原创)IconFont(矢量图标字体)在Winform中的应用

    一.前言 很多时候,使用矢量图形可以带来非常美观的界面效果,比如SVG的使用.但是Winform原生是不支持显示SVG图像的,所以退而求其次,可以使用IconFont来实现相似的矢量效果. 先来个图解 ...

随机推荐

  1. 【转】学习apicloud和IOS之间的模块化使用

    最近公司有使用APICloud发开的需求,需要我这边提供一些模块包得封装.因为没有也是刚接触APICloud,所以也就在看官方文档 .下面讲一讲我再使用过程中得一点点东西. 首先,下载官方SDK,下载 ...

  2. JavaScript 获取对象中第一个属性

    使用 Object.keys(object) 可以取出属性名为数组,但会打乱顺序 严格意义上对象中是只有映射关系而没有顺序的,但是在存储结构里是有顺序的,如果想获取存储结构里的第一个属性可以使用for ...

  3. JavaScript onkeydown事件入门实例(键盘某个按键被按下)

    JavaScript onkeydown 事件 用户按下一个键盘按键时会触发 onkeydown 事件.与 onkeypress事件不同的是,onkeydown 事件是响应任意键按下的处理(包括功能键 ...

  4. SC || Chapter7 健壮性和正确性

    finally中语句不论有无异常都执行 若子类重写了父类方法,父类方法没有抛出异常,子类应自己处理全部异常而不再传播:子类从父类继承的方法不能增加或更改异常 判断checked和unchecked: ...

  5. DROP LANGUAGE - 删除一个过程语言

    SYNOPSIS DROP [ PROCEDURAL ] LANGUAGE name [ CASCADE | RESTRICT ] DESCRIPTION 描述 DROP LANGUAGE 将删除曾注 ...

  6. java8关于LocalDate,Date

    关于java8中的新的时间日期类 public static void main(String[] args) { Date date = new Date(); LocalDate localDat ...

  7. cocos2dx通过ndk编译c++库

    ndk编译c++库,然后通过jni调用实现重要代码封装,是安卓应用中最常用的技术,一方面可以将重要的代码实现隐藏,防止泄漏,也可以提高打包速度. ndk里面的sample文件夹中有很多实用的例子,其中 ...

  8. 几种排序算法的比较转自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]大,则交换两者的值,否则不变,在 ...

  9. python从列表中删除相邻重复元素

    这里以一个栗子来用三种方法实现,输入a=['1','1','2','2','1','1'],输出b=['1', '2', '1'] 方法一: list1 = ['] def del_adjacent( ...

  10. python2和python3中filter函数

    在python2和python3中filter是不同的,其中在python2中filter返回的是一个list,可以直接使用 >>> a = [1,2,3,4,5,6,7] > ...