使用 fontAwesome 動態加入連結 icon

什麼是fontAwesome？

fontAwesome 是文字檔，使用文字就可以產生出很多icon
因為它不是固定的圖片，所以有以下兩個好處

當字型放大時，icon也會跟著放大（且不會失真）
當文字改變顏色，icon也會跟著變顏色

載入fontAwesome的css和fonts檔案之後，加入指定的class名稱，就可以做出icon了

如何載入fontAwesome？

[方法一]用官網提供的 CDN 路徑來載入樣式

[步驟解析]

進入此網址 https://fontawesome.com/start

複製此段語法（Font Awesome’s CDN，下圖中紅色箭頭處）

再貼至html的<head>中

這樣，就可以使用fontAwesome的方式來載入icon了！

[方法二]本地端下載後，再載入到專案中

[步驟解析]

進入此網址 https://fontawesome.com/start

選擇左側的 Download （紅色箭頭處）

在「On the Web」頁面，將 Font Awesome 的檔案下載下來
按照 Using Web Fonts with CSS 的說明，從剛才下載的「fontawesome-free-5.8.1-web」資料夾中

把 /webfonts 資料夾，整個複製後，放入自己的專案中
把 /css/all.css 整個複製後，放入自己的 css 資料夾中（為了避免跟自己的 all.css 重複，因此我把 Font Awesome 的 all.css 檔名改為 fa.all.css）

在html的<head>中，載入fa.all.css

<head>
    <link rel="stylesheet" href="css/fa.all.css">
    <link rel="stylesheet" href="css/all.css">
</head>

這樣，就可以使用fontAwesome的方式來載入icon了！

開始在HTML中加入icon

html語法：

[說明]
“doc” 是路徑，意思是 doc 的資料夾內

css語法：

list前方的圓點

因為 CSS reset ，會設定 ul: padding:0 使得list 原有的 list-style 圓點看不見了。

假如想讓 list 的圓點重新出現在前方的話，加入圓點樣式的時候，記得補上較大的 padding-left 就可以了，如下語法：[color=red]

.list{
	list-style-type: square;
	padding-left: 50px;
}

1
2
3

.list a:before{
	margin-right: 15px;
}

希望在icon和文字中間有一些間距，因此在a連結前面加了margin-right

jquery語法：

[重點一]

因為關鍵字（‘value’）已經用了單引號，所以外圍必須使用雙引號（上圖綠色箭頭處）
jquery可以自由去判斷，目前的檔案類型該用哪張圖片
a連結裡面，如果內容有包含.jpg的話，就加上後面的這兩個class名稱（far 和 fa-image）

[name$=‘value’]

href裡面如果有包含到你指定的關鍵字（‘value’），就可以被選取到，就算只是片段的，只要有相符合的內容，都可以被抓到。

因此，jquery可以針對a連結中href的副檔名，來加入對應的class名稱。

[重點二]

為什麼class名稱是 far 和 fa-image ？

這是fontAwesome的用法，都是字型檔

選擇想要的icon後，將icon的class名稱複製（下圖紅色底線處），貼到自己的jquery裡面以此為範例：
https://fontawesome.com/icons/image?style=regular

除了fontAwesome之外

另一個服務提供參考
https://icomoon.io/
可以使用他們提供或自己做 icon

參考文章：https://wcc723.github.io/css/2013/10/05/web-fonts-2/

如何將icon放到文字後面？

我的codepen練習

想要將fontAwesome的icon位置移到文字的後面

❗️

假如是將class寫在html裡面，作法如下：

在文字「圖片檔案」後方插入class名稱 <i class="far fa-image"></i> ，整個包在a連結中

1
2
3

<li>
<a href="doc/colorful.jpg">圖片檔案<i class="far fa-image"></i></a>
</li>

❗️

假如是將class用jquery動態載入的，作法如下：

要將內容插入到文字後方可以使用 append 方法
[補充].append()用法

jquery語法：

1	$("a[href$='.pdf']").append('<i class="far fa-file-pdf"></i>');

這樣就可以動態的新增囉！（如下圖）

[注意！]
因為插入的 i 標籤是被包在a連結裡面，假如要調整 icon 的 margin，css 必須這樣寫：

1
2
3

li a i{
  margin-left: 15px;
}

[注意！]

.append()括弧內要寫的是完整的 i 標籤
<i class="far fa-file-pdf"></i> [color=red]

但如果是要把icon放在文字前面，是使用.addClass()的話，括弧內只需要寫 class 名稱 ‘far fa-file-pdf’ 即可（不需要 i 標籤）[color=lightgreen]

可對照下圖：

如何將icon插入在文字中間？

要插入在文字中間的話就建議另外用元素包住，方便取得要新增的位置。例如以下範例

html:

1	<li><a href="doc/得獎名單.xls">這是一個<i class="sheet"></i>xls檔案</a></li>

jquery:

1	$("i[class*='sheet']").addClass('fas fa-file-alt');

就成功了！

icon從「空心」變「實心」

原本是空心的icon，在css加上：

1
2
3

.product_content>i{
	font-weight: bold;
}

就變成實心的了！

在`<input>`tag 中加入 Font Awesome icon

參考文章：
https://stackoverflow.com/questions/15988373/how-do-i-add-a-font-awesome-icon-to-input-field/15988499#15988499

我的codepen練習：
https://codepen.io/saffranwang/pen/KYyxBB

要怎麼將 FontAwesome 用在任何 tag 上？

此處以<input>為例做說明

為什麼`<input>`不能跟`<button>`一樣，用一般的方式使用FontAwsome？

在<button>使用 FontAwsome，直接插入<i>tag 即可

html:

1	<button><i class="fas fa-search"></i></button>

css:

button{
  width: 50px;
  height: 30px;
}

results:

[原因說明]
像上面<button>的用法，FontAwsome 是使用「:before 偽元素」來將 icon 插入到元素，但是在<input>無法使用偽元素，所以無法用這種方式來插入icon

而雖然<button>可以很容易的插入icon，但是<button>卻有些致命的缺點，例如：不相容於較舊的瀏覽器

解決方式：將 FontAwesome 視為一般字體插入`<input>`

[先示範type="text"和type="textarea"]

html:

1 2	<input type="text" class="name" value="&#xf007"> <input type="textarea" class="comment" value="&#xf4ad">

步驟一：在html加入value="&#xf007"

f007是這個icon的unicode，每個 icon 都有自己獨一無二的 unicode

Link to the FontAwesome unicode (cheatsheet): fortawesome.github.io/Font-Awesome/cheatsheet

css:

.name{
  font-family: "Font Awesome 5 Free"; 
  font-weight: 600;
}
.comment{
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  font-size: 20px;
  color: orange;
}

步驟二：

下面這兩項，一定要在 css 中加入
⭐️ font-family: "Font Awesome 5 Free";
⭐️ font-weight: 600;

隨著 FontAwesome 的版本不同，font-family可能會有更改，目前 FontAwesome version 5 使用的就是"Font Awesome 5 Free"

也可調整 icon 的font-size和color等樣式

results:

❗️ 如果是要用在type="submit"，要記得將<input>用<form></form>包起來，action也需填入有效的值，icon才能夠正確呈現

html:

1
2
3

<form action="index.html">
    <input type="submit" value="&#xf1d8" class="send">
</form>

css:

.send{
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
}

results:

用 jQuery 切換 icon，要注意 class 名稱是否有相同的地方

我的codepen練習

https://codepen.io/saffranwang/pen/LvBNXv

想要做出像 burberry 網站一樣，點擊 icon 展開收合內容時，icon 也會跟著切換

❗️ 要特別注意，要前後切換的兩個 icon，「各自的 class 名稱」是否有相同的地方，會有兩種情況：

情況一：兩個 icon 的 class 完全不同

切換前的 icon:

1	<i class="fas fa-bars"></i>

切換後的 icon:

1	<i class="far fa-caret-square-up"></i>

html:

<div class="box1">
  <h1>兩個 icon 的 class 完全不同</h1>
  <a href="#"><i class="fas fa-bars"></i></a>
</div>

js:

$('.box1 a').on('click', function(event) {
	event.preventDefault();
		
	$('.box1 i').toggleClass('far fa-caret-square-up');

	});

results:

切換前
切換後

用 chrome 開發人員工具來看：

切換前
切換後兩個 icon 的 class 會同時存在，在網頁上會顯示出後面那一個

情況二：兩個 icon 的 class 有重複的地方

切換前的 icon:

1	<i class="fas fa-chevron-down"></i>

切換後的 icon:

1	<i class="fas fa-chevron-up"></i>

❗️ 有重複的地方是「fas」

html:

<div class="box2">
  <h1>兩個 icon 的 class 有重複的地方</h1>
  <a href="#"><i class="fas fa-chevron-down"></i></a>
</div>

js（正確寫法）:

class 有相同的地方「fas」，不可以在.toggleClass這裡再出現一次。因此，.toggleClass後面要寫的是('fa-chevron-up')，而不是('fas fa-chevron-up')

$('.box2 a').on('click', function(event) {
	event.preventDefault();
		
	$('.box2 i').toggleClass('fa-chevron-up');

	});

results:

切換前

切換後

用 chrome 開發人員工具來看：

切換前
切換後

❗️ 如果，js 寫錯了，把 class 重複的地方「fas」再寫一次

js（錯誤寫法）:

$('.box2 a').on('click', function(event) {
	event.preventDefault();
		
	$('.box2 i').toggleClass('fas fa-chevron-up');

	});

切換後，圖案就會出不來

用 chrome 開發人員工具來看：

切換前
切換後因為是.toggleClass，因為原本就有「fas」，所以「fas」就不會被加上

Q&A

Q:
請問在jq速記表上Attribute有很多[href*=‘value’]類似這種的寫法[href$='value']，我想請問的是$、*、!或…這些是在什麼時候使用?有甚麼差異性嗎?

A:
這邊提供一個範例給你參考，並說明一下：

$、*、! 這些是用來做選取匹配使用的，不同的符號代表的意思也不相同，因此也會影響到選取的內容

這邊也附上文章給你了解

Q:
想問老師href裡的內容是自己隨意命名嗎?

<li><a href="doc/word.jpg">圖片1</a></li>

我看下載範例中並無這個檔案(doc/word.jpg)，所以意思只要jquery中可以找到.jpg樣式就可以換icon嗎?

A:
針對你的問題回答:

href 裡面可以自由命名，影片中的 JQuery 選取器主要是抓取 href 中是否含有 .jpg 的部分
JQuery 並不是去判斷說 doc/word.jpg 路徑下是否有檔案，只針對 a tag 裡的 href 屬性裡面的值去做判斷也就是說 $("a [href$='.jpg']") 這個寫法代表選擇所有 href 屬性以’.jpg’結尾的 a 元素。

Q:
請問before 跟偽元素是什麼意思？

A:
偽元素在 HTML&CSS 課程中章節 5 講座 33 的清除浮動方式，就是使用偽元素來做的哦

偽元素最常使用的就是 :before 和 :after，它並不是真正網頁裡的元素，但可以和真正網頁的元素一樣被使用及表現，也可以對偽元素指定 CSS 樣式

這篇是偽元素的介紹，提供給你參考

Q:
請問font Awesome用載入的方式跟直接寫在html語法裡有什麼差異嗎？

A:
兩種都是可以的哦，

jQ 是當有些情境你必須動態載入時，就可以依照你設定的條件來載入，

如果只是靜態網頁直接載入 HTML 是沒問題的

[範例]
如下圖中，把下圖紅色框框處的語法，直接寫入html中

再調整一下css

1
2
3

i{
	margin-right: 15px;
}

就成功載入icon了

Q:
課程範例中，fontAwesome的icon到底是算在a連結裡面還是a連結之外的東西呢？

A:
打開 Chrome 工具就可以看出來，before 是在 a 連結裡的

before、after 你可以當作他就是插入了一個 HTML 元素，

你也可以透過寫成他是 display: block 讓他變成區塊元素，或者變成你想要變成的樣子

Q:
假如有多個不同的副檔名（例如 .jpg, .pdf, .xls）都想要插入同一個icon，jquery選擇器該怎麼寫呢？

A:
選取器也跟css一樣，可以選擇多個，像是下面這樣的語法（多個selectors中間用逗號隔開）

1	$("a[href$='.jpg'], a[href$='.pdf'], a[href$='.xls']").addClass('far fa-image');

就完成了！

什麼是fontAwesome？

如何載入fontAwesome？

[方法一]用官網提供的 CDN 路徑來載入樣式

[方法二]本地端下載後，再載入到專案中

開始在HTML中加入icon

html語法：

css語法：

jquery語法：

[重點一]

[重點二]

除了fontAwesome之外

如何將icon放到文字後面？

假如是將class寫在html裡面，作法如下：

假如是將class用jquery動態載入的，作法如下：

如何將icon插入在文字中間？

icon從「空心」變「實心」

在<input>tag 中加入 Font Awesome icon

要怎麼將 FontAwesome 用在任何 tag 上？

為什麼<input>不能跟<button>一樣，用一般的方式使用FontAwsome？

解決方式：將 FontAwesome 視為一般字體插入<input>

用 jQuery 切換 icon，要注意 class 名稱是否有相同的地方

我的codepen練習

情況一：兩個 icon 的 class 完全不同

情況二：兩個 icon 的 class 有重複的地方

Q&A

在`<input>`tag 中加入 Font Awesome icon

為什麼`<input>`不能跟`<button>`一樣，用一般的方式使用FontAwsome？

解決方式：將 FontAwesome 視為一般字體插入`<input>`