大部分系統設計時的按鈕還是以文字為主,原因是避免操作的人誤會圖示的意義,尤其在游標移到按鈕上時沒有顯示註解文字,操作失誤造成的後果肯定無法想像!
不過有次主管則是希望我把最簡單、不會誤會的按鈕,改成圖示,例如「搜尋」按鈕用放大鏡;「刪除」就用垃圾桶圖示顯示。
這種依照目前絕大多數的使用習慣來說,已經幾乎不會理解錯誤了,就可以直接用圖示取代文字呦!
但像是新增、選擇、全選等,有時候圖示選得不夠精確,加上並排顯示時會不太清楚,這時候如果使用者因為怕按錯而產生疑惑,就很明顯表示這個圖示按鈕絕對是設計不良囉!
這篇就來教你如何將文字類型的按鈕,透過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="/btn-with-font-awesome/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相當好用,唯一的限制大概就是如果要用到大量的圖示,並且通通放在同一個系統,有時候發現付費的圖示比較好看的時候,就要考慮付費還是自己畫了。
如果是公司遇上有一些付費圖示想使用,但公司沒有美工能作圖或沒有多餘時間的時候,建議可以直接變成付費會員,不僅未來開發系統的運用上變得相當便利、提高一致性,同時也是以行動支持這些資訊應用平台的好方法呦!