大部分系統設計時的按鈕還是以文字為主，原因是避免操作的人誤會圖示的意義，尤其在游標移到按鈕上時沒有顯示註解文字，操作失誤造成的後果肯定無法想像！
不過有次主管則是希望我把最簡單、不會誤會的按鈕，改成圖示，例如「搜尋」按鈕用放大鏡；「刪除」就用垃圾桶圖示顯示。
這種依照目前絕大多數的使用習慣來說，已經幾乎不會理解錯誤了，就可以直接用圖示取代文字呦！
但像是新增、選擇、全選等，有時候圖示選得不夠精確，加上並排顯示時會不太清楚，這時候如果使用者因為怕按錯而產生疑惑，就很明顯表示這個圖示按鈕絕對是設計不良囉！
這篇就來教你如何將文字類型的按鈕，透過Font Awesome來改成圖示類型的按鈕吧！
內容目錄
按鈕基本樣式製作
這邊就以「搜尋」按鈕為例，我們先把文字類型按鈕完成吧！
HTML部分：
<!-- HTML -->
<div>這是原本按鈕樣式</div>
<div class="btnI1">
<input type="button" value="搜尋" class="ctrlbutton">
</div>CSS部分：
/* CSS */
/* 按鈕美化基本樣式調整 */
.ctrlbutton {
display: inline-block;
margin: 5px 3px;
font-weight: 400;
text-align: left;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 2px 13px;
font-size: 14px;
line-height: 30px;
min-height: 35px;
border-radius: 2px;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
color: #ffffff;
background-color: rgb(148, 190, 214);
border-radius: 8px;
cursor: pointer;
letter-spacing: 2px;
box-shadow: 2px 2px 3px grey;
border: none;
padding-right: 11px;
}
/* 游標移動到按鈕上時的樣式變化 */
.ctrlbutton:hover {
color: white;
box-shadow: none;
border: none;
background-color: rgb(124, 170, 195);
}以上程式碼完成樣式如下：
接下來我們將Font Awesome插入我們的網站，
並且使用它。
如何嵌入Font Awesome圖示
可以到Google瀏覽器直接搜尋，輸入「font awesome cdn」，第一個看到「Setup Webfont with CDN | Font Awesome」就是了。
補充：
cdn的意思就是只要用一行程式碼嵌入，你就可以直接使用網站上的內容了。
所以我們進入網頁後向下捲動，尋找到cdn區塊中有<link>標籤開頭的，就是我們要找出來複製放進我們程式碼的內容：
於是複製這行之後，回到我們HTML的<head>與</head>標籤之間貼上，貼上範例如下：
<!-- HTML -->
<!-- 紅色字體為修改的內容 -->
<head>
<meta charset="utf-8" />
<title>test</title>
<!-- 在這裡貼上 -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<link rel="stylesheet" type="text/css" href="Style1.css" />
</head>這樣就可以開始使用囉！
Font Awesome圖示實作步驟
接下來，我們前往Font Awesome找尋我們要的icon，Font Awesome網站連結：https://fontawesome.com/
進入網站後上方導覽列點選「Icons」頁籤：
這時候就可以看到好多現有的icons供你選擇，還可以直接搜尋想要的icon噢！
我們直接搜尋「搜尋」的關鍵字「search」，就會發現有很多放大鏡相關的圖示出現。
這邊小提醒，游標移到圖示上時，如果右上角有「PRO」字樣表示是要付費才能使用的呦！
因此這邊我們用第一個免費的圖示點進去，免費版也只有一種粗細，確定使用這個的話就按下「Start Using This Icon」按鈕：
彈出視窗後，這個<i>標籤就是我們要的了！
因此按下複製按鈕：
就可以回到我們的HTML程式碼，在想要加入圖示的地方貼上<i>標籤，同時要把<input>標籤的value屬性留空，才不會還有文字在噢：
<!-- HTML -->
<div>這是原本按鈕樣式</div>
<div class="btnI1">
<!-- 貼上圖示的程式碼 -->
<i class="fas fa-search"></i>
<!-- 將value的「搜尋」兩個文字拿掉 -->
<input type="button" value="" class="ctrlbutton">
</div>這時候會暫時呈現這樣：
看起來雖然暫時是壞的，但這個步驟的重點是，那個放大鏡有成功顯示出來就完成icon的嵌入囉！
修正Font Awesome圖示與按鈕
接下來，因為放大鏡目前是與按鈕並排呈現，我們要將放大鏡放入按鈕中，並把按鈕寬度放大到適當的大小。
這時候要用上position:relative和position:absolute相對位置的屬性來呈現。
還不知道這兩個屬性怎麼使用的話，可以點選下方連結看我們另一篇的教學，先認識一下這兩個屬性呦！
(延伸閱讀：CSS position 屬性教學：relative和absolute實作)
於是最終的所有CSS如下，紅色字體為有修改的內容：
/*CSS*/
/* 紅色字體為本次修改內容 */
.ctrlbutton {
display: inline-block;
margin: 5px 3px;
font-weight: 400;
text-align: left;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 2px 13px;
font-size: 14px;
line-height: 30px;
min-height: 35px;
border-radius: 2px;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
color: #ffffff;
background-color: rgb(148, 190, 214);
border-radius: 8px;
cursor: pointer;
letter-spacing: 2px;
box-shadow: 2px 2px 3px grey;
border: none;
padding-right: 11px;
/* 新增按鈕寬度 */
width: 60px;
}
/* 當圖示被游標覆蓋時，它同層的下一個標籤狀態改變 */
i:hover + .ctrlbutton, .ctrlbutton:hover {
color: white;
box-shadow: none;
border: none;
background-color: rgb(124, 170, 195);
}
/* 設外層為基準位置 */
.btnI1{
position: relative;
}
/* 放大鏡設為相對位置 */
i.fa-search{
position: absolute;
top: 16px;
left: 26px;
color: white;
}
/* 游標移動到圖示時，游標改變 */
i.fa-search:hover{
cursor: pointer;
}完成樣式如下：
完成樣式
總結
以上就是整個Font Awesome的應用方式，以及如何將圖示放在按鈕上的教學。
Font Awesome相當好用，唯一的限制大概就是如果要用到大量的圖示，並且通通放在同一個系統，有時候發現付費的圖示比較好看的時候，就要考慮付費還是自己畫了。
如果是公司遇上有一些付費圖示想使用，但公司沒有美工能作圖或沒有多餘時間的時候，建議可以直接變成付費會員，不僅未來開發系統的運用上變得相當便利、提高一致性，同時也是以行動支持這些資訊應用平台的好方法呦！
