用font生成小图标

生成小图标的几种方式

一、本期分享的主题

生成小图标一共有三种方式

1. CSS Spirit
2. Font + html
3. Font + css

其中第一种方式大家已经耳熟能详了，这里就不多说了，重点说一下后两种。

font是指字体文件，把图标文件封装到font格式的文件中，并进行引入即可。先不说别的，先看一下演示效果。代码下载

二、如何实现的呢？

1. 引入字体文件，以下代码比较重要

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

   加红加粗部分是自己定义的字体名称，后面会用到的。

   src是引入的四个文件，因为要兼容不同的浏览器，所以需要引入几个文件。具体哪个文件对应哪个浏览器，感兴趣的同学可以看课后的视频，有详细讲解。基本上写法是固定的。

2. 为要使用图标的类定义引用的字体

   						.icon{
   						  font-family: 'pokerFont' !important;
   						  font-style: normal;
   						  font-weight: normal;
   						  font-variant: normal;
   						  text-transform: none;
   						  line-height: 1;
   
   						  /* Better Font Rendering =========== */
   						  -webkit-font-smoothing: antialiased;
   						  -moz-osx-font-smoothing: grayscale;
   						}
   					

   请再注意一下加红加粗的部分，与上一步自己配置的字体保持一致。

   最后两行是为了小图标去掉锯齿形状。

3. 最后使用有两种方式，一种是用html直接填入图标对应的十六进制编号，另一种是使用伪类:before或:after来规定。其中，后一种方法是HTML5的方法，低版本的浏览器不支持。前一种方法可以兼容到IE6甚至可能更低。但是如果不考虑兼容性，后一种使用类名进行配置，有一定程序的封装，感觉更好一点。包括阿里云，也是用的后一种方法。

   						<div class="icon">1</div>
   					

   配置好类名与对应的十六进制字符即可。

   后一种方法：

   						.spades:before {
   						  content: "\e917";
   						}
   					

   						<div class="icon spades">5</div>
   					

三、如果想要知其然并要知其所以然……

在仿阿里首页时找到这种奇特的写法，仿出来以后，查找到一篇教程，对于感兴趣的小伙伴们可以点我

如果你不想看，只是想用小图标，自动生成小图标的网站点我