將圖標LOGO之類的圖形圖像轉換成字體調用方法大全

借鑑百度對此標題的評價：

使用字體圖標的優點

字體圖標除了圖像清晰度以外，比位圖還有哪些優點呢。

適用性：一個圖標字體比一系列的圖像（特別是在Retina屏中使用雙倍大小的圖像）要小。一旦圖標字體加載了，你的圖標就會立刻渲染出來，不須要下載一個圖像。

可擴展性：圖標字體能夠用過font-size屬性設置其任何大小。這使您可以隨時輸出不一樣大小的圖標，然而，使用位圖，你必須得爲每一個不一樣大小的圖像輸出一個不一樣文件。

靈活性：文字效果能夠很容易地應用到你的圖標上，包括顏色，陰影和翻轉等效果。他們還能夠在任何背景下顯示。

兼容性：網頁字體支持全部現代瀏覽器，包括IE低版本。詳細兼容性能夠點擊這裏。

 

根據http://iconfont.cn/help/platform.html   該網址內容的介紹，咱們一步步來。

第一步

選出一個你的小圖標，放入PS 或者其餘什麼圖片轉換工具將圖片轉換成  SVG格式的圖片(若是沒看到SVG格式，說明你的PS工具版本過低啦)  而後拖到http://iconfont.cn/icons/uploadShow    此頁面  上傳剛剛的SVG圖標

第二步

上傳成功後會出現如圖所示的樣子

而後填寫名稱和Tag的時候你本身隨便填寫一個名稱   必定要記住名稱，而後編輯製做，成功後直接將剛剛的名稱放到該網頁的搜索框搜索那個名稱  你會發現真的存在！ 好的，將它加入你的購物車類型的東西，  成功了一半了！！！

第三步

第二步最後也能夠不加「購物車」，直接點擊下載，點擊下載  而後打開  你會發現出現一堆垃圾！可是它能夠用  是成功的  

雖然成功了，可是咱們還得會調用它！

第四步(調用)

打開你的項目  iconfont.css文件內容複製到項目<style>裏面(只要你調用了就OK啦)，一樣demo.css裏面的內容不少垃圾，你只須要複製出本身須要的類的名稱的css就能夠了

基本就是上面紅色窗口的那兩串代碼而已.....複製到你的頁面<style></style>裏去！

還沒好！！！

什麼  .eot .svg .ttf  .woff這幾個鬼玩意兒要用的！  將這四個複製到你項目的某個文件夾下，隨便取名font文件夾，而後在剛剛的iconfont.css裏面修改那幾個url的路徑，使其對應你存放這四個文件的路徑，不要弄錯了，這步驟很關鍵！

如圖吧

第五步

在頁面上隨便弄個標籤，給它上面你定義的標籤class  名稱就行了 <i class="icon iconfont">&#xe600;</i>  icon iconfont樣式不要調用錯了    這裏的。。e600就是對應上面紅色窗體的\e600(可本身定義)

PS:假如一次性有幾百個圖標   那麼會不會生成  幾百個*4 的  .eot .svg .ttf  .woff 文件呀  ！！！  那樣太恐怖了，  這時候  ，直接在下載這個文件的以前，將全部你要製做的圖標所有加入你的「購物車」，一次性下載你所須要的圖標就好啦，  只有四個那種文件，被封裝在一塊兒啦！

你中途忽然想換一個圖標？？？  最好不要刪除你購物車裏面的圖標，中途更換，從新制做，而後覆蓋原先的 .eot .svg .ttf  .woff 文件 就完成了。