css字体图标

字体图标

本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果。

优点

本身体积更小，但携带的信息并没有削减。
几乎支持所有的浏览器。

icomoon字库

 http://www.iconfont.cn/

阿里icon font字库

http://www.iconfont.cn/

fontello

http://fontello.com/

Font-Awesome

http://fortawesome.github.io/Font-Awesome/

Glyphicon Halflings

http://glyphicons.com/

Icons8

https://icons8.com/

字体引入到HTML

首先把 以下4个文件放入到 fonts文件夹里面。

字体使用

第一步：在样式里面声明字体： 告诉别人我们自己定义的字体

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?7kkyc2');
  src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
    url('fonts/icomoon.woff?7kkyc2') format('woff'),
    url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

第二步：给盒子使用字体

span {
		font-family: "icomoon";
	}

第三步：盒子里面添加结构

span::before {
		 content: "\e900";
	}
或者  
<span></span>