web icon小图标字体

　　相信大家在很多网站都已经看到icon小图标被大量使用，那么icon小图标是怎么做成的呢，下面就稍微描述一下，多余的话就不说了，直奔主题吧。

　　icon小图标现在基本上有三种方式：

一、css sprite

也叫css雪碧或者css精灵，这种方法主要是用背景定位和背景图片，网上太多关于css sprite的文章，我就不细说了。

二、icon font+html

这种方法新浪博客和淘宝网易都有使用

看下面两张图的对比，这是新浪微博的主页，第一张图首页图标是一个房子，第二张图我注释掉font-family属性之后首页图标变成了html文件中的字母 E，这个就使用到了web字体图标。

 

那么怎么制作web字体图标呢，首先向大家推荐一个网站：https://icomoon.io

我们可以使用这个网站很轻松的就能制作出字体图标，使用方法http://isux.tencent.com/icon-font.html这个网站已经说的很清楚了，大家可以参考。

主要就是导入svg格式的图片，选中，然后download下来就可以了，download下来之后会生成一个压缩包，解压之后大家可以看见一个demo.html文件，用浏览器打开就能看见你的字体图标。

然后在你的项目中使用时只需要新建一个标签对然后copy demo里的十六进制代码到你的标签对里面，并且在前面加上&#x

eg:

<span>&#xdfadf</span>

 

其他字体图标网站推荐：http://www.fontello.com/ 、 阿里巴巴的字体图标库http://www.fontello.com/

使用方法：用字体在网页中画icon小图标

其他参考资料推荐：如何把图标转换成字体

视频：http://www.imooc.com/learn/243

三、icon font+css

这种方法和第二种大体是差不多的，只不过把写在html文件中这种字符&#xdfadf利用 :afte r或者 :before 伪元素写在.css文件中。

这个.css文件是可以通过制作web字体图标的网站自动生成的。例如：如果你用的是https://icomoon.io这个网站制作的话，下载下来的文件包里面就有一个iconmoon.css的样式文件，你只需要在一个空的html标签上使用这个class名，并且在样式文件中正确的引入了fonts文件，就可以使用了。是不是比第二种方法省时很多呢？

这里需要特别指出的是，download下来的压缩包，里面的样式文件对fonts文件的引入是根据他自己的目录结构写的url，所以引入到你自己的项目中的时候，需要在iconfont.css文件中修改正确的文件路径。

以下代码中加下划线的就是相应的字体文件，为了兼容不同的浏览器，所以有多个格式的字体文件。

@font-face {font-family: "iconfont";
  src: url('iconfont.eot'); /* IE9*/
  src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('iconfont.woff') format('woff'), /* chrome、firefox */
  url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}