网站中用到的图标字体集

      一个按钮，前后左右中或带有一个图标，代表这个按钮的实际意义。现在已经有成熟简单的方法来完成。

    @font-face是CSS3中有关于字体设置的属性，通过@font-face可以将本地字体设置为Web页面字体，并能兼容所有浏览器。使用@font-face配合一定的字体来制作Web页面中的Icon图标。初一看有点不实际，以前的Icon都是依靠图片来完成，怎么可能用字体就能实现呢？如果你以前有用过HTML的实体符，我想就不会那么惊奇了。我们需要得到font
icon的字体，然后通过@font-face将这个字体运用到一定的字符上，从而让他渲染出来是ICON的效果。

    怎么得到这种字体，这是关键。

    君子善借于物。这里有个网站就不得不说，非常强大---IcoMoon。

    


   你可以通过此网站来获得一些你想要的图标字体，并可以通过阅读一些它的文档来了解它是怎么使用。

   下载Icon的demo后，要怎么使用？这要用到html5和css3。

1、用html5中元素的一个data-icon属性。

  例子：

  html部分代码

        

<div>
<div class="fs1" aria-hidden="true" data-icon=""></div>
<input type="text" readonly="readonly" value="" />
</div>

  Css样式代码

       

@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot');
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('fonts/icomoon.woff') format('woff'),
url('fonts/icomoon.ttf') format('truetype'),
url('fonts/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
font-family: 'icomoon';
content: attr(data-icon);
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}

结果：  


2、用元素中class属性

html部分代码：

<span class="box1">
<span aria-hidden="true" class="icon icon-home"></span>
 icon-home
</span>

   Css部分代码：

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

.icon{
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.icon-home:before {
content: "\e001";
}

    结果：


  看到了，是不是很兴奋。其实，不止IcoMoon哦，大家可以多搜一些这方面的知识，学习一下。我只做抛砖引玉了！

玩完代码，来玩太极！