CSS 小结笔记之图标字体（IconFont）
本篇主要介绍一种非常好用的图标大法——图标字体（IconFont）。
什么是图标字体？顾名思义，它是一种字体，只不过这个字体显示的并不是具体的文字之类的，而是各种图标。
网站上经常会用到各种图标，之前网页上使用图标主要采用精灵图（背景位置+背景缩放）来实现，但是这样使用起来有许多不便之处，一方面缩放处理起来比较麻烦，一方面如果要改动一些图标就需要去找到设计人员重新设计，然后重新添加，这个过程非常不友好。
图标字体可以非常便捷的去解决以上问题，使用起来也非常简单。因为他是字体，所以可以当成字体来引用，只需要给出对应的字符而不需要通过测量背景图片位置那么麻烦。并且改变图标大小只需要改变字体大小就可以了。这里有两个网站推荐：（1）、阿里巴巴矢量图标库http://iconfont.cn/ （2）IcoMoon https://icomoon.io/
下面给出IcoMoon 具体使用方法
1、打开IcoMoon 网站，点击IconMoon App。
2、打开后是具体图标的界面，可以自己添加自己的图标进行生成，也可以选用他给出的图标，在默认图标的下方 会有add Icons From Library 点击后可以看到更多的图标供选择（有免费的有付费的）。
3、点击Generate Font后会生成 当前选择的图标的界面，右下角的Generate Font 也会变成 Download ，也可以进行相关的下载设置（例如：让其支持ie6/7之类的）。
4、下载完成后 会有以下文件，这些文件都最好保存下来，不要随意删掉。
5、接下来给出图标字体的具体使用方法（也可以自行看使用图标字体的css文件——style.css的相关内容）
（1）、将字体文件夹复制到项目中并且声明字体（此处代码不需要记忆，因为基本上都一样，直接复制即可）
@font-face {
font-family: 'icomoon';/*声明字体名称，可自行设置，应用的时候对应即可*/
src: url('fonts/icomoon.eot?lep7lm');
src: url('fonts/icomoon.eot?lep7lm#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?lep7lm') format('truetype'),
url('fonts/icomoon.woff?lep7lm') format('woff'),
url('fonts/icomoon.svg?lep7lm#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
（2）、使用字体
.IconMoon {
font-family: 'icomoon';
}
（3）、具体显示对应图标
a、直接使用（很方便，但是一般不要使用，因为光看小方块分辨不出这些图标有什么区别）， 例如
<li><span class="iconhome"></span></li>
<li><span class="iconsmile"></span></li>
<li><span class="icontongue"></span></li>
span标签中间的小方块不是真的方块，而是对应Demo页面中每个图标下面对应右侧的方块。
b、使用css 伪元素选择器before 来进行添加
<li><span class="icon-home">在这前面有一个home图标</span></li>
<li><span class="icon-smile2">在这前面有一个smile2图标</span></li>
<li><span class="icon-tongue2">在这前面有一个tongue2图标</span></li>
<li><span class="icon-sad2">在这前面有一个sad2图标</span></li>
<li><span class="icon-wink">在这前面有一个wink图标</span></li>
对应的css代码为
.icon-home:before {/*content的值是对应的图标代码*/
content: "\e900";
}
.icon-smile2:before {
content: "\e9e2";
}
.icon-tongue2:before {
content: "\e9e4";
}
.icon-sad2:before {
content: "\e9e6";
}
.icon-wink:before {
content: "\e9e7";
}
效果图为
（4）、正如之前所说，这些图标本质上是字体，所以可以很方便的去改变颜色，大小，产生阴影效果等
具体的代码如下
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
Ul {
list-style: none;
} @font-face {
font-family: 'icomoon';
/*声明字体名称，可自行设置，应用的时候标出即可*/
src: url('fonts/icomoon.eot?lep7lm');
src: url('fonts/icomoon.eot?lep7lm#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?lep7lm') format('truetype'), url('fonts/icomoon.woff?lep7lm') format('woff'), url('fonts/icomoon.svg?lep7lm#icomoon') format('svg');
font-weight: normal;
font-style: normal;
} .IconMoon {
font-family: 'icomoon';
} .icon-home:before {
/*content的值是对应的图标代码*/
content: "\e900";
color: aqua;
font-size: 20px;
} .icon-smile2:before {
color: deeppink;
font-size: 40px;
content: "\e9e2";
} .icon-tongue2:before {
color: orange;
font-size: 10px;
content: "\e9e4";
} .icon-sad2:before {
content: "\e9e6";
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
color: blue;
font-size: 40px;
} .icon-wink:before {
content: "\e9e7";
text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.4);
color: blue;
font-size: 40px;
}
</style>
</head> <body>
<div class="IconMoon">
<ul> <li><span class="icon-home">在这前面有一个home图标</span></li>
<li><span class="icon-smile2">在这前面有一个smile2图标</span></li>
<li><span class="icon-tongue2">在这前面有一个tongue2图标</span></li>
<li><span class="icon-sad2">在这前面有一个sad2图标</span></li>
<li><span class="icon-wink">在这前面有一个wink图标</span></li>
</ul>
</div>
</body> </html>
6、当我们想要给字体添加新的图标或者减去一些图标时，只需再次打开网站，进入到IconMoon App 页面，然后点击 Import Icons 将之前我们下载的字体文件目录下的selection.json 文件，就可以在我们之前选中的基础上再次进行操作了，用起来非常的方便。
CSS 小结笔记之图标字体（IconFont）的更多相关文章
- CSS高级技巧 图标字体ICONFONT的使用方法视频
图标字体 iconfont 这是一种字体,它跟svg 有很大 相似点 它是矢量的,放大缩小不失真的.很且很小. 我们把它成字看来. 字体 在 从ie4就开始支持的. 兼容性很好 唯一麻烦的地方 ...
- 图标字体(IconFont)制作
图标字体(IconFont)介绍 图标字体(IconFont)现在越来越被广泛使用,大大提高了网页的多样化,解决了视网膜屏幕失真的问题. 据说微软从IE4开始支持的这个私有方法(@font-face) ...
- CSS 小结笔记之解决flex布局边框对不齐
在使用flex 进行伸缩布局的时候,经常会给子盒子设置边框,这时经常会出现上下边框对不齐的情况.本篇文章来探讨并解决这个问题. 具体出现的问题如下图所示 具体代码如下 <!DOCTYPE htm ...
- CSS 小结笔记之浮动
在css中float是一个非常好用的属性,float最基本用法是用来做文字环绕型的样式的. 基本用法:float:left | right 例如 <!DOCTYPE html> <h ...
- css与jquery、图标字体
*)还能这样选择 header #search input[type="text"] *)按钮常用颜色:#008cBA(字母大小写没有区别) *)清除浮动后,text-align没 ...
- CSS学习笔记----CSS3自定义字体图标
响应式网页字体图标 作者:大漠 日期:2014-01-28 点击:3220 @font-face Responsive 本文由大漠根据Jason的<Responsive Webfont Icon ...
- 图标字体iconfont的使用
什么是iconfont? iconfont就是字面上的意思,叫做"字体图标",将一套图标集以字体文件的形式封装,并通过 CSS 的 @font-face 作为 Web Font 调 ...
- css读书笔记4：字体和文本
字体属性网页中的字体有3个来源:1.用户机器中安装的字体:2.保存在第三方网站上的字体.可以使用link标签把它们链接到页面中:3.保存在子集的web服务器上的字体.可以使用@font-face规则随 ...
- CSS 小结笔记之em
1.为什么使用em em也是css中的一种单位,和px类似.很多人会疑惑为什么有了px之后还要使用em,而且em使用起来相对于px来讲比较麻烦. em主要是应用于弹性布局,下面给出一个小栗子说明em的 ...
随机推荐
- Zookeeper--0200--安装与集群搭建、常用命令、客户端工具
看这里,http://www.cnblogs.com/lihaoyang/p/8358153.html 1,先使用可视化客户端软件 ZooInspector 连接上集群中的一个节点,看下zk的结构: ...
- Anaconda 科学计算环境与包的管理
相信大多数 python 的初学者们都曾为开发环境问题折腾了很久,包管理和 python 不同版本的问题,特别是 window 环境安装个 scrapy 各种报错 ,使用 Anaconda 可以很好的 ...
- Hadoop2源码分析－Hadoop V2初识
1.概述 在完成分析Hadoop2源码的准备工作后,我们进入到后续的源码学习阶段.本篇博客给大家分享,让大家对Hadoop V2有个初步认识,博客的目录内容如下所示: Hadoop的渊源 Hadoop ...
- nodejs遇到的问题
1.express-session deprecated undefined resave option; provide resave option app.js:49:9 express-sess ...
- PBN飞越转弯Flyover衔接DF航段保护区组图
PBN飞越转弯Flyover衔接DF航段,是飞越转弯中最常用的形态. Flyover-DF保护区叠加图: Flyover-DF保护区分解图:
- [转]论magento1和magento2的速度性能优化问题
本文转自:http://www.360magento.com/blog/magento-speed-up/ magento从2007年发展至今,也经历了十余年的磨练,如今也迎来了magento的换代产 ...
- 表格行mouse经过时高亮显示
昨天有解决网友一个问题<Repeater控件添加onmouseover和onmouseout事件>http://www.cnblogs.com/insus/p/3714013.html 这 ...
- JS存储cookie读取cookie删除cookie详细用法
假设有这样一种情况,在某个用例流程中,由A页面跳至B页面,若在A页面中采用JS用变量temp保存了某一变量的值,在B页面的时候,同样需要使用JS来引用temp的变量值,对于JS中的全局变量或者静态变量 ...
- MVC的注意事项及开发技巧
演示产品源码下载地址:http://www.jinhusns.com
- SQL - 先安装SQL2008 R2后安装AD导致无法正常登陆数据库(无法启动MSSQLSERVER)
分析原因:安装AD后,系统改为使用域用户登陆,原先安装SQL时设置的“本地用户”信息已经修改,当前(域)用户没有权限访问MSSQLSERVER实例文件夹或整个SQL文件夹. 解决方法: 1.打开“服务 ...