[HTML]圖示框架Font Awesome 4匯入各種ICON圖案 (補充Font Awesome 5使用方法
4 min readSep 5, 2020
Font Awesome提供了許多ICON可以使用
使用方法
使用Font Awesome圖標，<head>請在HTML頁面的部分內添加以下行
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">搜尋想要的icon
這邊我搜尋星星
點入後可以看到使用程式碼
<i class="fa fa-star-o" aria-hidden="true"></i>寫在body內
顯示結果
完整程式碼
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><title>Document</title></head><body><i class="fa fa-star-o" aria-hidden="true"></i><i class="fa fa-star-o" style="font-size:48px;"></i><i class="fa fa-star-o" style="font-size:48px;color:red"></i></body></html>
補充Font Awesome5使用方法
使用Free Font Awesome 5圖標 在Font Awesome上註冊一個帳號
再從e-mail中拿到代碼（稱為KIT CODE）
再將代碼打入腳本xxxxx.js
<script src="https://kit.fontawesome.com/yourcode.js"></script>
接著就可以使用
例子
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<i class="fas fa-clock"></i>
</body>
</html>
