什么是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. HDU - 5457 Hold Your Hand (Trie + 最小割)

    Hold Your Hand Time Limit: 1500/1000 MS (Java/Others)    Memory Limit: 65535/102400 K (Java/Others)T ...

  2. Kunernetes集群架构与组件

    架构如图: master节点:主要是集群控制面板的功能,来管理整个集群,包括全局的角色,调度,都是在master节点进行控制 有三个组件: API Server:  是 k8s提供的一个统一入口,它是 ...

  3. Vue 后台管理

    这里是结合vue和element快速成型的一个demo 里面展示了基本的后台管理界面的大体结构和element的基本操作 GitHub的地址:https://github.com/wwwming/ad ...

  4. 说说TCP的三次握手

    在说这个问题之前,先说说IP协议和TCP协议 问题:IP协议能做什么?不能做什么? 我们都知道IP协议是无连接的通信协议,它不会占用两个正在通信的计算机的通信线路,这样就降低了IP对网络传输中的需求, ...

  5. servlet实现简单的反向代理

    项目基于Spring 须要的依赖为: <dependency> <groupId>org.mitre.dsmiley.httpproxy</groupId> < ...

  6. mysql5.7.24 解压版安装步骤以及遇到的问题

    1.下载 https://dev.mysql.com/downloads/mysql/ 2.解压到固定位置,如D:\MySQL\mysql-5.7.24 3.添加my.ini文件 跟bin同级 [my ...

  7. chrome浏览器跳过(忽略)所有的js断点

    在调试程序时我们经常通过打断点的方式来跟踪代码的执行流程,所以可能会在很多时候打很多断点,当我们知道了程序大概的执行流程之后,这时候断点就不太需要了.但是我们又不想马上把所有的断点清除掉,因为我们打的 ...

  8. python日记整理

    都是自己的学习总结,要是总结的有问题大佬麻烦评价一下我好修改,谢谢 python插件插件+pycharm基本用法+markdown文本编写+jupyter notebook的基本操作汇总 一.计算机基 ...

  9. JDK1.8 HashMap$TreeNode.rotateLeft 红黑树左旋

    红黑树介绍 1.节点是红色或黑色. 2.根节点是黑色. 3.每个叶子节点都是黑色的空节点(NIL节点). 4 每个红色节点的两个子节点都是黑色.(从每个叶子到根的所有路径上不能有两个连续的红色节点) ...

  10. Centos7 安装 OwnCloud 私有云

    OwnCloud 一款文件主机服务软件,就是我们平时使用的云存储,不过这是在自己主机的服务器上建立属于自己的私有云,OwnCloud 使用AGPLv3协议发布.本项目是基于PHP和SQLite,MyS ...