Bootstrap對我們來說已經不陌生了，大型的項目一定會用到它。它的DOM結構，字體圖標，組件，響應式布局等，很大程度上提高了WEB開發速度。

在bootstrap剛出來的時候，它擁有豐富的組件、美麗優雅的排版布局、漂亮的設計、卓越的兼容性等優點，風靡了全球。是的，特別是它的字體圖標，對於前端來說，擺脫了切圖的麻煩；對於設計師來說，不用為設計圖標而煩惱，bootstrap為我們提供了足夠多的字體圖標，200多個供我們選擇使用。

隨著人們審美眼光的提高，過去的審美觀已經不能滿足現在的審美觀。過去我們以為簡潔優雅是一種美，現在我們可能還要要求更多的內容，精細的線條美感已經成為WEB表達的趨勢。例如阿裏的iconfont, 官網網址：http://www.iconfont.cn/. 我們來看2組圖標的對比：

　　可以看出，細線框的圖標，更美觀一點。需求已經有了，一起來看下圖標的改造。

（1）如果項目中沒有用bootstrap及glyphicons字體圖標，事情就變的簡單了。我們只需要打開iconfont官網，http://http://www.iconfont.cn/, 尋找自己需要的圖標。加入購物車中，如圖。

　　選好需求的圖標，之後進入右上角的購物車，

　　點擊進入購物車頁面，

　　進入電腦下載文件夾裏，可看到已導出的文件，有ttf, svg, eot, woff及CSS，還有HTML文件DEMO。

　　是的，把demo拿到項目中就可以用啦。

（2）項目中已經使用Bootstrap了，如果把字體圖標類名也改掉，頁面模板及相應的文件都需要修改，對於大型的項目來說，工作量一定很大。在不影響目前項目使用的情況下進行修改，就需要對字體圖標的相應的字體文件進行修改。這就有點難度了，需要借助icommon來實現，在線生成工具：https://icomoon.io/app/#/select

　　1，進入主頁面，

　　2，新建一個圖集

　　　　3，添加glyphicon.svg圖片

點擊頁面裏的importIcon按鈕即可添加，或者使用自定義的直接拖拽到圖集即可。

　　可以看到glyphicon圖標已加進來，選擇需要修改的圖標，然後在點擊修改按鈕，彈出修改彈框，在彈框裏修改圖片或替換圖片，這裏的圖片是SVG的，如圖：

　　替換該圖標的SVG圖片，然後關閉對話框，已經可以看到我們的圖標已經替換啦，接著替換其他圖標，

　　替換完後，導出字體文件，點擊最下面的“generate font”按鈕, 進入導出頁面，點擊download下載。

　　這樣我們的字體圖標改造就完成了，是不是很方便，既不用改HTML文件，也不用改CSS文件，只需要替換掉glyphicon的.svg、.eot、 .ttf、 .woff字體文件。試試看，是不是很方便。

項目經驗：Glyphicons字體圖標改造，制造適合自己項目的字體圖標