前端工具----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，有興趣也能夠看看。

　　目前正在準備一些前端開發經常使用的工具，你們有的話歡迎進行交流！