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的 ...
随机推荐
- 使用.NET Core与Google Optimization Tools实现员工排班计划Scheduling
上一篇说完<Google Optimization Tools介绍>,让大家初步了解了Google Optimization Tools是一款约束求解(CP)的高效套件.那么我们用.NET ...
- 手把手教你封装 Vue 组件并使用 NPM 发布
Vue 开发插件 我们可以先查看Vue的插件的开发规范 我们开发的之后期望的结果是支持 import.require 或者直接使用 script 标签的形式引入,就像这样: ps: 这里注意一下包的名 ...
- JVM Scan
1.jmap -histo pid|head -100 2.jstat -gcutil pid cycle 3.jmap -heap pid
- java多线程下的所的概念
锁和synchronized关键字 为了同步多线程,Java语言使用监视器(monitors),一种高级的机制来限定某一 时刻只有一个线程执行一段受监视器保护的代码.监视器的行为是通过锁来实现 ...
- Mac OS X 下搭建thrift环境
1.概述 thrift是一个软件框架,用来进行可扩展且跨语言的服务的开发.它结合了功能强大的软件堆栈和代码生产引擎,以构建在 C++, Java, Python, PHP, Ruby, Erlang, ...
- Java中的构造器与垃圾回收
构造器 在我们初始化对象时,如果希望设置一些默认值,那么就可以使用构造器,在Java中,构造器使用和类同名的名字且没有返回值,如下 class Test{ private String name; T ...
- TCP滑动窗口
TCP利用滑动窗口实现流量控制基本的数据单位不是数据段,而是字节 滑动窗口本质上是描述接受方(本地)的TCP数据报缓冲区大小的数据,发送方根据这个数据来计算自己最多能发送多长的数据.如果发送方收到接受 ...
- spring boot 与 thymeleaf (1): 国际化
在thymeleaf 里面有个消息表达式: #{...} , 可以借此来实现国际化. 在我使用这个功能的时候, 碰到了一个问题, 按照 JavaEE开发的颠覆者 Spring Boot实战 上面编码 ...
- wamp配置虚拟路径（路径别名）
wamp默认的路径是安装目录下的 www 目录, 如果你想运行php代码,就需要将代码放在 www 目录下, 但这样很不方便,能否通过配置的方式,来实现 在别的目录下的 php 代码,也能正常运行和访 ...
- Solidity字符串类型
字符串可以通过""或者''来表示字符串的值,Solidity中的string字符串不像C语言一样以\0结束,比如abcd这个字符串的长度就为我们所看见的字母的个数,它的长度为4. ...