一、前言
- 今天要學習的內容：今天主要是稍微總結一下，頁面中如何用字體代替圖片，省事，省時，方便，實用！
- 小蘇啰嗦：人都是有惰性的。真的。剛開始我們有一個經驗豐富的美工，加上我們關系又非常好，以至於每次我都是等着她把設計圖給我，我才開始碼html。遇到圖片的地方，會切的就自己切了，不會的，就直接讓美工切圖給我。成了一個不動腦子的碼農！現在，美工換人了，新的美工太忙了。加上可能對我們前端交互不熟悉，現在原型圖出來，我能不找美工就不找美工。自己動手！呵呵。
二、正文
- 如果下面兩張圖（右擊圖片-在新窗口打開圖片，可以看到大圖，更清晰），除了文字，上面的圖片你平時是怎么做的？如果也是用圖片代替的，那么今天你就會學到新技能；如果你不是用圖片，好吧，這篇文章對你來說out了。你可以不用往下看啦。哈哈！
上面圖片中用到的就是Font Awesome的矢量圖標，它可以直接用CSS對它們進行大小、顏色、陰影或者其它任何支持的效果進行更改。主要概括如下：
- 我們為什么要使用圖標？
圖標可以傳送大量信息，幫助人們語義化理解所看到的東西，現在我們出去看到各種建築物都是直接用圖標表示，而不是用文字，圖標能更形象化的去表達所想表達的意思。所以說使用圖標是非常重要的。如果你做的網站全部是用文字，而沒有一些圖標去襯托的話，總感覺會缺少一些東西，那就是美感。
- Font Awesome是什么？
Font Awesome是一套圖標字體，主要目的是和Bootstrap搭配使用，但是我們也是可以直接使用的。是一款基於css框架的網頁字體圖標庫，【完全免費】。
ps:對於【完全免費】這一詞，博客園園友 rvalue對我的進行了指點（非常感謝這位大神）：
【Font Awesome字體根據SIL Open Font License進行許可;
Font Awesome的CSS/LESS/SASS等代碼是根據MIT License許可的;
Font Awesome的文檔根據CC BY 3.0許可協議許可. 】
使用優點：
- 無需依賴js庫；
- 可以無限放大縮小；
- css自由控制大小，顏色等；
- 分辨率高；
- 兼容性好；
- 等等等等；
引用方法：
- 直接引用MaxCDN提供的：
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> - 下載后直接引用css：
<link rel="stylesheet" href="../font-awesome/css/font-awesome.min.css"> - 第三種比較適合大神，這里就不說了。
使用方法：
- 只需要使用css前綴fa,再加上圖標名稱，比如：<a class='fa fa-search'>搜索</a>
- 放大圖標：fa-2x(兩倍大小),fa-3x,fa-4x,fa-5x;這樣的話圖標可以成倍放大，也可以直接font-size寫自己需要的大小；
- 圖標對齊：fa-fw 這樣的話用到的圖標寬度就會對齊了。（這個在豎形列表中很有用）
- 圖標旋轉：fa-spin fa-pulse ;最適用的就是刷新，加載等圖標了。這樣的話不用加gif動畫了，很實用；
- 太多了，大家可以直接看官網，非常詳細；
詳細代碼
- 上圖左邊的html代碼如下，很輕松的就實現了，而且hover,click顏色都可以直接設置，不像以前這樣的話會用到三張圖片去替換，麻煩：
1 <div class="left"> 2 <ul class="cleanfloat"> 3 <li><span class="fa fa-home fa-fw"></span>首頁</li> 4 <li class="on1"><span class="fa fa-home fa-fw"></span>首頁</li> 5 <li><span class="fa fa-user-circle fa-fw"></span>客戶</li> 6 <li><span class="fa fa-user-circle fa-fw"></span>客戶</li> 7 <li class="on2"><span class="fa fa-bell fa-fw"></span>消息</li> 8 <li><span class="fa fa-bell fa-fw"></span>消息</li> 9 <li><span class="fa fa-bar-chart fa-fw"></span>報表</li> 10 <li><span class="fa fa-bar-chart fa-fw"></span>報表</li> 11 <li><span class="fa fa-pencil fa-fw"></span>應用</li> 12 <li><span class="fa fa-pencil fa-fw"></span>應用</li> 13 <li><span class="fa fa-cog fa-fw"></span>設置</li> 14 <li><span class="fa fa-cog fa-fw"></span>設置</li> 15 </ul> 16 </div>
- 上圖中圖片右上方的實現html代碼如下：
1 <ul class="cleanfloat"> 2 <li class="onC1"><a class="fa fa-search"></a>查詢</li> 3 <li><a class="fa fa-refresh fa-spin"></a>刷新</li> 4 <li><a class="fa fa-share-alt"></a>分享</li> 5 <li><a class="fa fa-sign-out"></a>注銷</li> 6 <li><a class="fa fa-power-off"></a>退出</li> 7 </ul>
再寫就感覺有點啰嗦了。個人覺得這個用起來簡單易上手，真的是很實用的！
三、總結
今天只是簡單的給小白了解一下這個知識，個人覺得是很實用的，至少不用總是難為ui妹子設計小圖標了。而且大小和顏色也可以自己控制。好像我這廢話有點多。希望大家對我進行批評與指教！
本文只是告訴大家一些小的圖標可以不用ui妹子去設計了，但是一些色調呀排版呀，程序猿跟ui妹子比起來，還是會差距大的不要不要的。
ps:其實為了總結這個，花了一天的時間，畫頁面，調樣式。但是真到寫的時候，竟然寫的東西太少，也不知道寫些什么，唉，真的是有點挫敗感！
ps：上次寫的一篇關於css簡單實現五角星評分、點贊收藏、展示評分（半顆星、1/3顆星） 被很多人直接搬走了，也沒有注明出處，這有點不厚道了，關鍵是有的地方顯示的發表時間竟然還在我這個時間之前，真的是無語了！我很歡迎大家轉載，但是請保留申明和出處，尊重每個人的勞動成果！