[DAY15]網頁切版入門及版面實作_ Font Awesome

2022 iThome 鐵人賽

DAY 15

Modern Web

網頁切版入門及版面實作系列第 15 篇

14th鐵人賽網頁切版新手上路網頁設計 css教學

ruhui0726

團隊蝦兵蟹將

2022-09-30 08:41:22

910 瀏覽

分享至

如何使用 Font Awesome

在網頁設計的同時，可以看到需要使用大量的icon，當我們網站要放入一些比較複雜的icon設計圖示，但沒有設計師幫我們產出時，或是想要節省製作成本時，就可以考慮使用Font Awesome這個網站，今天就是介紹一下如何使用將Font Awesome快速將icon引入網頁中。

網站名稱：Font Awesom
網站連結：https://fontawesome.com/

步驟1. 進入`Font Awesome`的網站，點擊`Start for Free`

步驟2. 接著輸入你的 Email 並完成註冊

步驟3. 接著系統會發送一封信到你剛所填寫的Email，請前往你的信箱

步驟4. 開啟信件後，會引導到自己的`Kit's`頁面，請複製專屬於你的`Kit's Code`

步驟5. 複製完你的`Kit's Code`後將他貼上至`HTML`中的`<head>`裡即可開始尋找`icon`使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/你的專屬Kit's Code.js" crossorigin="anonymous"></script>
    <title>Document</title>
</head>
</html>