我個人覺得，課程內容非常紮實而且實用！講師也非常有耐心，講得很詳細易懂，推薦對於已經有一點網頁設計基礎、想要邁向前端工程師的人，這門課真的非常值得參加！

當初為什麼報名 JS 直播班？

我原本其實就會一些網頁設計，像是 HTML、CSS 的切版，當時的 JS 能力大概頂多就是跟使用者互動的事件，例如 onclick 事件、onscroll 事件等等。

即使這樣的能力在網頁設計師的職缺已經算是堪用，但實際上 JS 能力相當侷限。當我想要繼續往前端工程師邁進的時候，就發現自己能力遠遠不足，甚至很多工作都已經需要前端框架的能力才能應徵了QQ

因此在開始學習前端框架之前，我決定先回頭來打好 JS 基礎，讓自己最起碼可以用原生 JS 來撰寫專案，避免提前學習前端框架也學得太辛苦。

參加六角學院直播班跟其他課程的差異

我覺得最大的差別有這些：

1. 每堂課都是重點
2. 老師和助教讓你問到飽
3. 有分組，讓你更有動力

1. 每堂課都是重點

這也是我當初選擇這門課的最大原因，購買之前，他們有釋出每週的教學重點，我之前對於資料串接、資料處理是完完全全零經驗，想跨到前端工程師，資料處理是必備的技能！

不過因為我本身就有 JS 基礎，所以前 4 週的課程對我來說都只是複習，輕輕鬆鬆就度過，但到後面其實也有點吃力，是內容非常豐富的課程，我們也需要在課後花大量時間練習，才能把技術內化成自己的能力。

2. 老師和助教讓你問到飽

直播課的時候，就可以即時提問，六角學院校長廖洧杰是真的非常有耐心，無論多基礎的問題都會耐心回答，這點也真的是令人佩服！

有的可能幾分鐘前講過的東西，又有人重複提問，老師也會再簡單重複一遍，這個我直接被圈粉，以後有他的課我一定上爆！

課後也隨時都有 Discord 平台，讓你可以線上提問，由老師或助教替你解惑，有些網友們也很熱情，也會協助你解決你的問題喔！

3. 有分組，讓你更有動力

說來慚愧，我是組員裡面最雷的，但我是真的抓不出時間啊啊啊~~~

為了讓我的職業生涯盡快上軌道，還要花時間練習。老實說這樣已經覺得很操了，實在是找不出時間參加組員間的討論QQ

但分組就會讓你有一種，盡可能不要落後太多的感覺，作業也會盡量準時交，跟上大家的腳步，至少事後回頭看他們的討論串，也可以看得懂或有點收穫喔！

看到這裡迫不及待想要前往六角學院看看嗎？

第一週~第九週的學習過程

因為課程時間上比較難配合，而且礙於上班族的時間真的真的很少，所以最後我正課全部蹺掉，週末才用 2 倍速看完課程，然後再靠自己好好練習。

有時候週末也有其他事情，就會搞到真的是覺得很操XD 而且我已經是做課程最低門檻的主線任務，都還是覺得有點操，真的不知道其他人到底怎麼有辦法花時間還參加專題班OAO

神人太多，只能說，套一句廖洧杰老師送給我們的話：跟自己比較！

最大的收獲是？

我覺得最大的收穫，應該還是讓我能順利求職並且把技能應用上吧！

畢竟我參加的首要目標也是找到一份前端工程師工作，雖然那些 Vue 前端框架都不會的情況下，能投履歷的職缺不多，但很幸運地，在還沒上完課程就找到工作了！

這段時間很明顯感受到自己 JS 的能力跟上課之前差異多大！從一個只會介面設計的網頁設計師，變成一個能寫出功能、串資料、整理資料的工程師，而且在工作上可以直接現學現賣，絕對是我收穫最大的部分！

如果時光能倒流，會希望自己再次注意哪些細節？

如果時光能倒流，應該還是會採用相同的聽課方式跟寫作業方式，時間不夠用也有時間不夠用的學習安排XD

但我應該會告訴自己，這門課真的太值得了，再怎麼沒時間也非報名不可啊XD

畢竟能學到讓你在工作上可以現學現賣的內容，表示這門課真的非常實用呢！！

對課程的建議或鼓勵？

大推六角學院校長廖洧杰帶的課程！！

洧杰老師是我目前上過的線上課程裡面，最有耐心、最會教的老師，而且講的內容都非常詳細，艱深的東西也能用最簡單的方式來讓大家理解，我個人認為，他的課絕對值回票價！

身為學長姐，分享些想入坑的新同學一些勉勵的話

最後也要勉勵大家，雖然老師很會教，程式的東西最後如果要進到自己的長期記憶，還是必須要靠大量的練習，雖然洧杰老師建議一個題目要練個十遍、二十遍，但真的沒時間的話，我是採用每週練習相同題目，盡量讓自己不要忘太快。

讓我們一起朝向下一個工程師的里程碑邁進吧！謝謝洧杰老師、謝謝六角學院！

延伸閱讀：

• 【課程推薦】零基礎網頁設計教學！帶你從入門到轉職
• Font Awesome 教學-Icon圖示取代文字的按鈕
• 如何使用 VS Code 插件 Live Sass Compiler 自動編譯SCSS？圖解一看就懂！

會以 SCSS 為主而非 SASS 原因是個人習慣看有大括號的樣式檔，因此雖然安裝插件和設定檔不分 SASS 或 SCSS ，但本篇介紹文內容會以 SCSS 為主噢！

熟悉 CSS 之後為什麼會想學預處理器 SCSS 呢？主要是考慮到如何在主管或客戶要求：「做另一個版本把藍色主色換成綠色、圓角少一點、陰影重一點看看！」
遇到這種要求的時候，如果只有純 CSS ，要改的地方可就多了。

預處理器 SCSS 的好處就是這些改檔案的需求可以用變數來處理，雖然預處理器可以寫函數，功能相當強大，但對初學者來說光是學會將顏色、圓角、陰影這些歸納成變數，就已經是網頁設計福音了！

會想撰寫這篇就是因為，我當時光是環境設定和輸出路徑也搞了一陣子@@
讓我手把手帶你設定一遍吧！

建立 SCSS 檔案

首先我們先在建立檔案的地方新增檔案，下圖中是我用xampp所以路徑在xampp下的htdocs，
雖然我建立的是.php檔案，但.html的靜態網站也可以，完全不影響這次教學的插件安裝設定。

然後我們要先建立好scss和css資料夾，我們設定時主要只會用到這2個資料夾來測試有沒有成功設定好路徑噢。

接著在scss資料夾中新增一個style.scss檔案。

SCSS 寫入測試用的樣式內容

再來我們可以在scss檔案中寫下簡單的測試樣式：

/* 用$開頭設定scss變數 */
$color: red;

/* 使用scss設定的變數 */
body{
 background: $color;
}

scss好處就是我們可以使用$錢字號來設定變數，測試樣式我們用顏色來當範例。

使用時前面只要前面有加上$就會帶變數進來，這樣要改的時候就只要改變數內容，就可以統一將所有網頁的顏色改變了，超方便的吧！

寫好之後就來安裝「 Live Sass Compiler 」插件，讓 VS Code 自己幫你把scss編譯並生成css吧！

安裝 VS Code 插件 Live Sass Compiler

「Live Sass Compiler」 這個插件，可以讓你在每次存檔的時候，就自動幫你從scss轉換到css一次，因此第一次轉換後還可以同時開啟scss和轉換好的css檔案，未來還可以即時比對轉換結果。

我們到 「 延伸模組 」 > 找「Live Sass Compiler」 > 按下「安裝」按鈕。

安裝好之後，再來要進入設定檔案來設定輸出路徑等相關設定囉！

開啟 VS Code 的設定檔案

修改 VS Code 「受限模式」為「信任」

通常想要在 VS Code 開啟設定檔案 settings.json 檔案前，你需要先將左下角的受限模式改成信任，因此我們到左下角點一下「受限模式」開啟模式設定。

點選「信任」按鈕。

再來我們就可以放心去開啟設定檔囉！

開啟 VS Code 設定檔

選擇左上角的「檔案」 > 「喜好設定」 > 「設定」。

開啟後會出現下面這個畫面，我們直接找選單中「延伸模組」 > 「Live Sass Compiler」 > 找到Formats的「在settings.json內編輯」按鈕點下去。

再來就是直接在設定檔中，手動打上你想要設定的內容。

手動設定輸出路徑

點下去後可以打上以下程式碼：

"liveSassCompile.settings.formats": [
    
    {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "~/../css"
    }
]

其中，savePath就是scss自動編譯成css檔案的輸出路徑囉！

當時 savePath 這條設定我搞半天都沒有效，最後是發現前面要多個 ~/ 符號才設定成功，這符號有些是用在「應用程式根目錄」，如果單純的 / 符號是從網站根目錄，不過有些網路範例並沒有寫到 ~/ 符號就能有效果。

補充：
format：指編譯後的 CSS 格式。
expanded 未壓縮
compressed 壓縮
extensionName：指檔案編譯後產生的副檔名。

到這邊基本設定就完成了，開始來測試自動轉換的強大功能吧！

測試將scss轉換成css檔

我們回到scss檔案，右下角因為安裝了 Live Sass Compiler 插件而出現了 Watch Sass 按鈕。

如果你的插件才剛安裝好，卻沒有出現這個按鈕時，通常重新啟動 VS Code 就會出現囉。

那我們就按下 Watch Sass 按鈕。

緊接著會跳出一塊視窗，顯示「Watching…」，這就表示已經成功啟用插件，並且開始監聽你的程式，只要你在scss檔案中按下存檔，就會自動幫你轉換成css檔案囉！

所以這邊我們就按下存檔吧。

存檔後出現下圖畫面，紅色框起來的地方就是轉換成css檔案後存放的位置，也就是我們剛剛設定的輸出路徑！

因此我們可以到檔案總管去看看有沒有成功製造出css檔案了。

這樣就能看到插件自動幫你生成好css檔案，並放在指定的資料夾中了！

你可以看到除了css檔案外，還有另一個.map檔案，這個檔案只是這個插件生成的路徑檔，不想生成的話只要到settings.json輸入以下語法就可以不生成.map檔了。

"liveSassCompile.settings.generateMap": false

務必記得你在設定檔中，
每一個項目之間要有「,」逗號當作間隔噢！

scss完成轉換後的css檔案呈現

最後就來看看成果吧！

我們把css檔案打開，原本的$color就自動替換成我們設定的顏色囉！

使用scss新手疑問

這邊多給我們的讀者一個新手容易遇到的小問題，大部分去看介紹文章可以看到許多用法，像是@mixin、@include等引用的基本用法。

這邊要介紹的小技巧是在使用上更基本，但新手容易出錯的用法：#{變數}

我們先把scss和css檔案同時開啟就能比較出問題點：

上圖可以發現，$ax-header-h: 66px; 是我原先自訂的一個變數。

當我想要用css的內建運算公式calc()語法，但如果只寫下面這樣：

/* 會轉換失敗的寫法 */

height: calc(100vh - $ax-header-h);

是沒有辦法成功被轉換的！

這時候要使用#和{ }把變數包起來，像下面這樣的程式碼寫法：

/* 成功轉換的scss寫法 */

height: calc(100vh - #{$ax-header-h});

就可以順利轉換囉！

總結

以上就是這篇使用 VS Code 的 Live Sass Compiler 插件，自動編譯 SCSS 成 CSS 檔案，並且把編譯後的檔案放置在你指定的位置中。

未來再也不怕主管或客戶突然想更換網頁顏色，否則100個頁面要改上百個顏色真的會頭昏昏腦脹脹，使用 SASS 或 SCSS 預處理器，幫你完成高效率的修改吧！

• 什麼是::before和::after？CSS偽元素怎麼用[實作範例]
• CSS position 屬性教學：relative和absolute實作
• RWD教學-只要兩行就能輕鬆見效的實作經驗

還不知道怎麼使用CSS的position相對位置屬性可以按下方連結延伸閱讀，讓你的偽元素應用更廣泛呦！

(延伸閱讀：CSS position 屬性教學：relative和absolute實作)

這裡跟各位讀者聊一下我當初在學習偽元素的經歷，當時自學CSS之後，對於偽元素其實並沒有碰過，學習的課程中也完全沒有提過這個方法。

於是當我到職場上，發現這個東西的時候，一開始只覺得好像很神奇，可以透過CSS就完成增加文字內容在段落前後，完全不用去改HTML或內文。

但後來發現怎麼有些標題附近的裝飾，好像也是用偽元素做出來的！？

於是開始研究怎麼生出那些東西，這完全考倒我了，我花了超級大把的時間爬文試圖了解這個東西！
但我無論怎麼研究，就是各種卡關，很多網站的程式碼範例是已經簡化、合併過的，讓我反而越來越搞不清楚到底如何使用它。

今天這篇文章，帶你從頭了解一次，並且用最簡單的範例，實作出加入內文的程式碼，以及實作當時我搞不懂的標題裝飾！

也強烈建議大家一邊實作，讓自己慢慢體會這個概念，最後這技巧才會是你的呦！

初學偽元素::before和::after

什麼是「偽元素」？

「偽元素」英文是「Pseudo」，可以用CSS「憑空創造」一個區塊出來，而且在HTML程式碼後台你並不會看到它存在，但在網頁F12開發人員工具時可以看到。

偽元素實作上常用的有::before、::after、::selection三種，而你會看到它們都有兩個冒號開頭，這跟:hover、:active等操作型的偽類做出區別。

雖然據說有些比較沒有習慣這樣區分的工程師不小心只使用了一個冒號，執行上好像也有成功，但養成好的習慣，也是避免未來程式需要花更多時間debug的好方法噢！

「偽元素」如何運作的？

這個東西簡易來說，是一個可以讓你僅透過CSS檔案，就能增加東西在HTML內文的方式。

實務應用上除了加入文字內容，還能增加各種不同的東西在畫面上，也可以搭配position屬性，讓你增加的東西漂浮在頁面任何你希望他存在的位置呦！

聽起來超厲害的吧！
這邊就透過範例來說明囉！

偽元素::before和::after實作範例

HTML基本設定

想一步一步搞懂的大家，也建議可以直接開啟你的編輯器，懶得打程式碼的話，就算是複製貼上看看效果也好，只有把範例看過去的話有時候也比較難吸收呦！

<!-- HTML -->

<div class="intro">我是艾咖Aikko！</div>

CSS我們先留空，HTML用一個<div>標籤寫下自我介紹，並且給予它一個class當作等等要在CSS使用的樣式名稱。

上方程式碼的結果會顯示這樣：

加上CSS偽元素

接下來我們試著加上偽元素::before和::after的CSS吧！

/* CSS */

.intro::before{
  content: "嗨！大家好，"; /*加入這些內容在整個<div>的前面*/
  color: blue; /*字體為藍色*/
}

.intro::after{
  content: "請多指教！"; /*加入這些內容在整個<div>的後面*/
  color: green; /*字體為綠色*/
}

::before就是可以將創建的內容直接放在整塊<div>標籤內容的前面；
::after則是放在後面，想加入的文字內容可以直接放在content的屬性當中，呈現結果如下：

用顏色區分就更清楚了，有沒有發現HTML內容完全不用變更，靠著CSS就能加入內容到HTML，完全是我這種底層工程師改不到HTML時的福音啊！

到這裡，你已經學會最簡易的偽元素應用了，趕緊消化練習一下，緊接著我們讓它有更廣泛的應用吧！

偽元素::before或::after輕鬆完成網頁的點綴和線段

網頁的點綴和線段範例

實際到Pinterest找一個有所謂的標題旁點綴元素，像下圖中”HOME >> 99 INSPIRATIONAL…”那段下方橘色長方體，這就可以用偽元素將它製造出來：

配合相對位置設定，偽元素隨你放！

還不清楚相對位置position的relative和absolute如何設定嗎？
建議先到下方文章練習看看比較容易看得懂呦！

(延伸閱讀：CSS position 屬性教學：relative和absolute實作)

那我們將剛剛的HTML改成圖片上的那串英文，並先將CSS留空：

<!-- HTML -->

<div class="intro">HOME >> 99 INSPIRATIONAL WEBSITE DESIGN TEMPLATES FOR 2020</div>

呈現如下：

接下來我們將CSS部分完成：

這裡先來個小提醒，就算沒有使用到content屬性，也一定要寫這個屬性，content屬性和::before、::after是生命共同體！
雙引號內容留空也沒關係，但是不寫的話就不會有作用呦！

/* CSS */

/*那整塊<div>標籤*/
.intro{
  position: relative; /*將整塊<div>當作基準位置*/
  width: 516px; /*設定寬度，讓偽元素的寬度直接設100%*/
}

/*新增的偽元素*/
.intro::before{
  content: ""; /*沒用到仍然要寫，雙引號內容留空*/
  width: 100%; /*設定長方形寬度*/
  height: 10px; /*設定長方形高度*/
  background: #ff7600; /*設定長方形顏色*/
  position: absolute; /*設定與<div>區塊的相對位置*/
  left: 0px; /*從<div>區塊左上角起算，與左邊距離為0，即靠左的意思*/
  top: 100%; /*從<div>區塊左上角起算，與上方距離為100%時才開始產生這個長方形，因此長方形會在整塊<div>區塊的下方*/
}

完成樣式如下：

超快速的吧！

到這邊雖然已完成，但也許你心中會有幾個疑惑，我來為大家解答一下。

解決你內心的疑惑

第一個疑惑：
那如果是用::after來寫的話可以嗎？
答案是當然可以！

因為一旦使用了position相對位置屬性後，就直接擺脫了你加的內容是要放在後面還是前面，而是直接按照position相對位置的設定改變位置囉！

第二個疑惑：
為什麼是用.intro這個<div>標籤當作基準呢？
這時我們要到網頁的F12開發人員工具來看看他們的階層關係：

從網頁F12開發人員工具我們可以發現，你剛剛用CSS創造的偽元素::before就在<div>標籤的下一層！
也就是說，::before這個元素你可以想成是一個標籤區塊，套用position相對位置設定後，偽元素設定position:absolute;屬性後的父元素就是<div>標籤區塊了。

因此，我們將<div>標籤區塊設定一個position:relative;屬性，來作為偽元素的基準位置。

這樣你就可以透過top和left等位置屬性，任意調整你創建的偽元素區塊位置了！

::before和::after實務上要小心的地方

使用時務必務必要小心的就是：
::before和::after一定要加入content屬性才會有作用！！！
這點一定要星號再星號⭐⭐⭐⭐⭐

就算沒有要加入文字，也一定要有content屬性，內容留空即可，像這樣：

/* CSS */

.intro::before{
  content: ""; /*雙引號中留空，但必須存在*/
  /*其他屬性設定*/

}

否則若沒有content屬性，你怎麼設定都是無效的呦！！！

就連我之前寫的時候偶爾也會忘記，然後再那邊debug老半天甚至還重複清掉cookie，懊惱為何沒有效果，最後才發現content屬性沒加到偽元素的設定中所以無效，真的是費心又耗時啊！

總結

以上就是最基礎、最基礎的偽元素::before和::after介紹，希望經過這些最基本的說明與範例實作，讓大家不用像我一樣花大把時間還一直搞不懂這在幹嘛！

而偽元素的應用超級廣泛，還能包刮用偽元素創建一個大於符號的箭頭，只要::before和::after分別產出一個長方形並傾斜，就能產出一個純程式碼的箭頭囉！

所以一旦你學會偽元素::before和::after的應用，它的優點就是自由度極高！！
還有只要你有一個HTML標籤作為基底，每一個標籤你都可以建立::before和::after兩個新的區塊出來，讓你不用修改HTML就能完成一堆實用的效果囉！

• Font Awesome教學-Icon圖示取代文字的按鈕
• CSS position 屬性教學：relative和absolute實作
• 純CSS製作HTML頁籤切換的效果與實例
• RWD教學-只要兩行就能輕鬆見效的實作經驗
• Radio button和Checkbox放大並自訂樣式

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

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

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

這篇就來教你如何將文字類型的按鈕，透過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="/tag/網頁設計/feed/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相當好用，唯一的限制大概就是如果要用到大量的圖示，並且通通放在同一個系統，有時候發現付費的圖示比較好看的時候，就要考慮付費還是自己畫了。

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

• 純CSS製作HTML頁籤切換效果
• RWD教學-只要兩行就能輕鬆見效的實作經驗
• 純CSS將Radio button美化與開關型整理(上)
• 純CSS將Radio button美化與開關型整理(下)
• Radio button和Checkbox放大並自訂樣式