Font Awesome

大家應該會注意到網頁中的可愛又精緻的 icon 了嗎，fcc也有透過外部引入的方式使用這個小設計，提供這些icon資源的網站很多，有的免費有的付費，這邊介紹新手常用的兩個網站。

Font Awesome

1. 取得kit碼
   進到網頁中按下 start for free 會請你輸入信箱收取 kit code，但這裡我收過了所以顯示錯誤訊息這個信箱已經收過了。

2. cdn
   在開心地挑選之前，我們先到上面的 doc 拉到下面點選 Getting Started，要引入的方式很多可以研究一下哪一種適合，但這些今天我都不要。
   
   回到google打上cdn fontawesome按下搜尋點第一個結果，這裡可以把他當成一個圖書館，複製第一個連結用<link>來引入。

3. 挑選想要的icon
   回到最上方的 icons ，這裡示範第一個 house。

4. 複製貼上
   對啦就是複製貼上，icon就出來啦！

<div>
	<i class="fa-sharp fa-solid fa-house">
		<span class="text">it's my home.</span>
	</i>
</div>

5. 來點效果
   如果我想要來一點效果呢，就請把他當成文字(text)給他一些CSS樣式吧，範例如下：

.font1 {
    font-size: 1.5rem;
    color: grey;
    text-shadow: 0 0 5px;
}

網路上有許多免費的資源以開源程式，會用的話就夠找到許多有趣的好東西。

下篇：起點(javascript)

引用與資源：
fontawesome_doc
cdnjs