图标字体的使用(fontello.com)字体推荐及使用技巧

网页设计中为了页面漂亮好看，图标是少不了，网页中使用的图标通常都是使用图片，使用图片图标的有很多弊端，如果你经常制作网页应该有一肚子埋怨。

1. 放大图标必须重新作图，
2. 改变颜色必须开启作图软件重新调色，并且不同的颜色就要对应一个图片图标
3. 更多弊端不一一列举

如果这些图标能像字体一样，改变大小，更改颜色，那岂不是太爽了，下面的文字就是介绍一种在网页中使用图标字体的方法。

下面懒人建站来介绍图标字体的使用(fontello.com)字体的使用以及技巧

首先：使用火狐、谷歌或者360极速模式（注：因为你选择的图标使用本地存储记忆的，这在后面会提到怎么利用本地存储在其他电脑上打开依然显示你选中的图标）打开http://fontello.com/这个图标字体网站，全英文的，不过懂不懂英文不重要，打开网站后用鼠标点选你中意的图标，全部选好以后，点击 右上角的红色下载按钮，就可以下载到一个压缩吧，解压出来，里面有类似 fontello.eot fontello.svg fontello.ttf fontello.woff 四种字体格式。

复制如下代码到你的样式表文件中，注意你的字体文件路径要对，根据实际情况自行修改 src: url('font/ 中的路径

/*图标字体*/
@font-face {
  font-family: 'fontello';
  src: url('font/fontello.eot');
  src: url('font/fontello.eot#iefix') format('embedded-opentype'),
       url('font/fontello.woff') format('woff'),
       url('font/fontello.ttf') format('truetype'),
       url('font/fontello.svg#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
.ficon,[class^="ficon-"],[class^="ficon-"]:before,[class*=" ficon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-left: .2em;
}

调用方法：在页面中书写类似这样的标签，html标签可以随便选，但是类名要和你上面定义的一致，如：<span class="ficon">&#xe813;</span>

字体图标在IE67下稍微要做一点兼容处理，不然页面中无法显示图标，在页面的head区域粘贴如下代码：

如果你的网页只是针对高级浏览器，不考虑IE9以下浏览器的话， 你可以使用CSS伪对象选择器如：.icon-eye:before { content: 'e839'; }

这里还真没试在不支持本地存储的浏览器上是不是有兼容方案，有兴趣的可以试一下。这里只说支持本地存储的浏览器，比如火狐、谷歌等。

这里用到两条命令：获取本地存储: window.localStorage.getItem('fontello:sessions:v4'); 设置本地存储：window.localStorage.setItem(key:value)，懂的看到这可以闪人了，不知道的可以往下看。

以火狐为例，打开fontello.com，先来选择几个图标，然后F12打开控制台，点击“控制台”输入命令：window.localStorage.getItem('fontello:sessions:v4');'fontello:sessions:v4'是名字，我在测试的时候他是这个名字，如果没有，你可以用以下代码把所有本地存储的key value值都遍历出来

    for(var i=localStorage.length - 1 ; i >=0; i--){
        console.log('第'+ (i+1) +'条数据的键值为：' + localStorage.key(i) +'，数据为：' + localStorage.getItem(localStorage.key(i)));
    }

把'fontello:sessions:v4'的值给复制出来，保存备用。

在其他支持本地存储的浏览器中打开fontello.com，F12打开控制台，点击“控制台”输入命令window.localStorage.setItem(key:value)   key 和 value 换成实际的值，

示例： window.localStorage.setItem('fontello:sessions:v4','{"font_size":16,"sessions":[{"name":"$current$","fontname":"","css_prefix_text":"icon-","css_use_suffix":false,"hinting":true,"encoding":"pua","font_fullname":"","font_units":1000,"font_ascent":850,"font_copyright":"","fonts":{"custom_icons":{"collapsed":false,"glyphs":[]},"fontelico":{"collapsed":false,"glyphs":[{"uid":"53ed8570225581269cd7eff5795e8bea","selected":false,"code":59392,"css":"emo-unhappy"},{"uid":"2bd5f98482d86649958312ea2ab5bb40","selected":false,"code":59393,"css":"emo-laugh"},{"uid":"9bc2902722abb366a213a052ade360bc","selected":true,"code":59407,"css":"spin6"}]},"fontawesome":{"collapsed":false,"glyphs":[{"uid":"9dd9e835aebe1060ba7190ad2b2ed951","selected":true,"code":59392,"css":"search"},{"uid":"ef74ff62feda486fd414410e782b598a","selected":true,"code":59460,"css":"graduation-cap"},{"uid":"7fe35dea791456114c356934333b4171","selected":true,"code":59404,"css":"renren"},{"uid":"d1945696d6bbbf84e388df9961f26a37","selected":true,"code":59408,"css":"sina-weibo"}]},"typicons":{"collapsed":false,"glyphs":[]},"iconic":{"collapsed":false,"glyphs":[]},"modernpics":{"collapsed":false,"glyphs":[]},"meteocons":{"collapsed":false,"glyphs":[]},"mfglabs":{"collapsed":false,"glyphs":[]},"maki":{"collapsed":false,"glyphs":[]},"zocial":{"collapsed":false,"glyphs":[]},"brandico":{"collapsed":false,"glyphs":[]},"elusive":{"collapsed":false,"glyphs":[]},"linecons":{"collapsed":false,"glyphs":[]},"websymbols":{"collapsed":false,"glyphs":[]}}}]}');

如果你重新增删了图标以后，需要重新获取使用window.localStorage.getItem('fontello:sessions:v4'）命令获取新值。

jquery特效http://www.51xuediannao.com/ 整理发布