web icon小图标字体

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

　　icon小图标如今基本上有三种方式：

1、css sprite

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

2、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

3、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- */
}