Font Awesome 教學-Icon圖示取代文字的按鈕

apps
apps

大部分系統設計時的按鈕還是以文字為主，原因是避免操作的人誤會圖示的意義，尤其在游標移到按鈕上時沒有顯示註解文字，操作失誤造成的後果肯定無法想像！

不過有次主管則是希望我把最簡單、不會誤會的按鈕，改成圖示，例如「搜尋」按鈕用放大鏡；「刪除」就用垃圾桶圖示顯示。

這種依照目前絕大多數的使用習慣來說，已經幾乎不會理解錯誤了，就可以直接用圖示取代文字呦！

但像是新增、選擇、全選等，有時候圖示選得不夠精確，加上並排顯示時會不太清楚，這時候如果使用者因為怕按錯而產生疑惑，就很明顯表示這個圖示按鈕絕對是設計不良囉！

這篇就來教你如何將文字類型的按鈕，透過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);
}

以上程式碼完成樣式如下：

search button原始樣式
search button原始樣式

接下來我們將Font Awesome插入我們的網站，
並且使用它。

如何嵌入Font Awesome圖示

可以到Google瀏覽器直接搜尋，輸入「font awesome cdn」，第一個看到「Setup Webfont with CDN | Font Awesome」就是了。

Font Awesome CDN
Font Awesome CDN

補充：
cdn的意思就是只要用一行程式碼嵌入，你就可以直接使用網站上的內容了。

所以我們進入網頁後向下捲動，尋找到cdn區塊中有<link>標籤開頭的，就是我們要找出來複製放進我們程式碼的內容：

Font Awesome CDN
Font Awesome CDN

於是複製這行之後，回到我們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」頁籤：

Font Awesome插入圖示步驟
Font Awesome插入圖示步驟

這時候就可以看到好多現有的icons供你選擇，還可以直接搜尋想要的icon噢！

Font Awesome插入圖示步驟
Font Awesome插入圖示步驟

我們直接搜尋「搜尋」的關鍵字「search」，就會發現有很多放大鏡相關的圖示出現。

這邊小提醒，游標移到圖示上時，如果右上角有「PRO」字樣表示是要付費才能使用的呦！

Font Awesome插入圖示步驟
Font Awesome插入圖示步驟

因此這邊我們用第一個免費的圖示點進去，免費版也只有一種粗細，確定使用這個的話就按下「Start Using This Icon」按鈕：

Font Awesome插入圖示步驟
Font Awesome插入圖示步驟

彈出視窗後，這個<i>標籤就是我們要的了！

因此按下複製按鈕：

Font Awesome插入圖示步驟
Font Awesome插入圖示步驟

就可以回到我們的HTML程式碼，在想要加入圖示的地方貼上<i>標籤，同時要把<input>標籤的value屬性留空，才不會還有文字在噢：

<!-- HTML -->

<div>這是原本按鈕樣式</div>
<div class="btnI1">

    <!-- 貼上圖示的程式碼 -->
    <i class="fas fa-search"></i>

    <!-- 將value的「搜尋」兩個文字拿掉 -->
    <input type="button" value="" class="ctrlbutton">
</div>

這時候會暫時呈現這樣：

Font Awesome插入圖示步驟
Font Awesome插入圖示步驟

看起來雖然暫時是壞的，但這個步驟的重點是，那個放大鏡有成功顯示出來就完成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插入圖示
完成樣式

總結

以上就是整個Font Awesome的應用方式，以及如何將圖示放在按鈕上的教學。

Font Awesome相當好用，唯一的限制大概就是如果要用到大量的圖示，並且通通放在同一個系統，有時候發現付費的圖示比較好看的時候，就要考慮付費還是自己畫了。

如果是公司遇上有一些付費圖示想使用，但公司沒有美工能作圖或沒有多餘時間的時候，建議可以直接變成付費會員，不僅未來開發系統的運用上變得相當便利、提高一致性，同時也是以行動支持這些資訊應用平台的好方法呦！

標籤

為你推薦