IcoMoon 使用
官方地址 http://icomoon.io/
实际上，它是一种字体，只不过这种字体的字象图标一样，比如windows中自带的MT Extra Webdings Wingdings字体。
使用的方法就是引入CSS即可
我们需要在IcoMoon App中定制他们，网站可以为你生成图标的CSS。

进入到IcoMoon App中，选中你需要的图标，然后点击底部的font
便会显示使用该"文字"对应的编码
在顶端的Prefences中勾选Encode & Embed Font in CSS 和 Use Class Selector
PS 如果不选择Use Class Selector的话 必须使用span标签
之后点击底部的Download

如何使用它？
引入下载的style.css
<link rel="stylesheet" href="style.css">

<span class="icon icon-file"></span>
<span class="icon icon-music"></span>
<span class="icon icon-play"></span>
<span class="icon icon-cart"></span>

即可

icon样式中使用的是font-family 表明他们实际上是字体， 因此可以用font-size来改变大小

图标字体IcoMoon 使用的更多相关文章

  1. 第一次制作和使用图标字体-IcoMoon

    开题:之前就有所耳闻,最近两天第一次运用到图标字体.刚开始嘛,一脸懵逼的状态.成功运用之后就来记录一下使用过程咯! 1. 打开在线生成工具:https://icomoon.io/app/#/selec ...

  2. 如何灵活利用免费开源图标字体-IcoMoon篇——张鑫旭

    一.温故知新 之前有专门介绍过如何使用类似fontforge软件制作自定义字符字体以及如何在web中实际应用. 不过,文中提到的是利用系统自带的一些特殊字体,如WINGDNG3.ttf字体. 显然,系 ...

  3. 如何灵活利用免费开源图标字体-IcoMoon篇

    http://www.zhangxinxu.com/wordpress/2012/06/free-icon-font-usage-icomoon/

  4. 使用IcoMoon生成图标字体

    就我个人而言,往往要想找点什么ICON素材啊,往往都是酱婶滴,先去FontAwesome(在线图标字体库,但资源有限)里面巴拉巴拉,或者其他资源看看有没有合适的.如果没有就去求助我们大UI,笑笑给我来 ...

  5. 方便的 IcoMoon 图标字体

    官网地址:https://icomoon.io/app/#/select 已发现的方便之处: 1.官网已提供大量常用图标字体: 2.可通过 svg 将其转换为 图标字体: 3.不仅可转换,还可自定义编 ...

  6. 图标字体 VS 雪碧图——图标字体应用实践

    本文介绍使用图标字体和SVG取代雪碧图的方法.雪碧图是很多网站经常用到的一种技术,但是它有缺点:高清屏会模糊.无法动态变化如hover时候反色.而使用图标字体可以完美解决上述问题,同时具备兼容性好,生 ...

  7. 图标字体(IconFont)制作

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

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

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

  9. iconfont-矢量图标字体的运用

    发现一个奇怪的现象:(http://m.muzhiwan.com) 这里面的图标竟然不是一张张小图标图片?Firebug下查看一下元素,竟然是这样的: 页面源代码如下: 好奇怪啊,这些个乱七八糟的&a ...

随机推荐

  1. 发现一个名为“Douyu”的国人项目

    刚刚在javaeye看到一个名为Douyu的国人项目,认为搞下去未来可能非常有意思,放到blog上做个标记. ——————下面是转载的作者原文——————— 原文地址例如以下:http://zhh20 ...

  2. jQuery中$.each的用法

    jQuery中$.each的用法   本文导读:jQuery中each()函数是基本上所有的框架都提供了的一个工具类函数,通过它,你可以遍历对象.数组的属性值并进行处理.jQuery提供的each方法 ...

  3. oracle 11g常用命令

    1.监听启动监听lsnrctl start停止监听 lsnrctl stop 查看监听状态 lsnrctl status 2.启动用oracle用户进入su - oracle运行sqlplus命令,进 ...

  4. HTML系列（九）：表单

    一.表单标签form 表单标签用于申明表单,定义采集数据的范围,即<form>包含的数据将被提交到数据库上,包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法. 表单能够包 ...

  5. ORACLE case when then

    Oracle CASE WHEN 用法介绍 1. CASE WHEN 表达式有两种形式 --简单Case函数 CASE sex WHEN '1' THEN '男' WHEN '2' THEN '女' ...

  6. linux查看与开启ssh

    首先通过物理终端进入到linux上,手工检查ssh发现没运行/etc/init.d/sshd statussshd is stopped手工启动服务,发现报告权限错误./etc/init.d/sshd ...

  7. xhprof failed to execute cmd: " dot -Tpng". stderr: `sh: dot: command not found '

    wget http://www.graphviz.org/pub/graphviz/ARCHIVE/graphviz-2.28.0.tar.gz tar xzvf graphviz-2.28.0.ta ...

  8. Windows 桌面边栏小工具开发入门

          准备为网站做一个桌面通知功能的工具,现在网上一般是html5+js的比较多.虽然html5+js现在是web的开发主流,但是我们应用一般是windows系统.并且应使用中,需要打开谷歌或其 ...

  9. codeforces 631D. Messenger kmp

    题目链接 首先想到kmp, 和普通的不一样的是,中间部分严格相等, 头和尾的字符相等但是数量可以不相等. 所以应该把子串的头和尾先去掉,然后对剩下的部分进行kmp. 子串长度为1或2要特别讨论. 不要 ...

  10. web编程速度大比拼（nodejs go python）（非专业对比）

    C10K问题的解决,涌现出一大批新框架,或者新语言,那么问题来了:到底谁最快呢?非专业程序猿来个非专业对比. 比较程序:输出Hello World! 测试程序:siege –c 100 –r 100 ...