前端工具----iconfont

　　在一张页面中咱们常常会看见一些小的图标，这些图标小巧、意义明确，总之很是有用，难道他们是一些小图片吗。不错有的的确是小图片，可是在这里我将介绍另一款工具那就是iconfont,咱们能够把这些图标当作一个个文字来对待，所以咱们能够调整它的大小和颜色。下面我来介绍一下如何使用。

　　iconfont有两种引入方式，一是在html的style标签中引入iconfont官网生成的自动连接，二是将选中的字体图标下载到本地，利用link标签引入外部css文件。

　　在线使用：

　　　　<style type="text/css">
            @font-face {
              font-family: 'iconfont';
              src: url('//at.alicdn.com/t/font_1454824002_513755.eot'); /* IE9*/
              src: url('//at.alicdn.com/t/font_1454824002_513755.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
              url('//at.alicdn.com/t/font_1454824002_513755.woff') format('woff'), /* chrome、firefox */
              url('//at.alicdn.com/t/font_1454824002_513755.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
              url('//at.alicdn.com/t/font_1454824002_513755.svg#iconfont') format('svg'); /* iOS 4.1- */
            }
                    
        </style>

　　

　　点击获取在线连接就能够，固然若是你要下载到本地使用就点击下载到本地，而后在须要的位置引入你想要的图标：

<i class="iconfont">&#xe600;</i>

　　注意：这里的class的值必需要包含iconfont这个属性值，每个图标都会对应一个编码，上面就是

　

　　来自知乎：http://www.zhihu.com/question/25952487

　　官方：http://www.iconfont.cn/help/iconuse.html

　　下载到本地：

　　　　下载到本地后，咱们解压会看到以下文件：

　　咱们把它所有复制到工程中而后利用标签引入iconfont.css便可。　

<i class="iconfont">&#xe600;</i>

　　那么就会在页面中出现你要的图标展现效果，怎么样不错吧！

　　固然还有其余一些字体图标库，好比 Font Awesome，有兴趣也能够看看。

　　目前正在准备一些前端开发经常使用的工具，你们有的话欢迎进行交流！