關於引入免費好用的icon這檔事(feat. font Awesome)
Jun 25, 2021
Font Awesome提供了許多免費好用的icon,要怎麼導入HTML,底下會從註冊到使用icon,不用10分鐘就可以搞定引入icon的問題。
使用icon需要有兩個步驟:1. 載入fontAwesome的CDN 2. 使用icon
- 載入fontAwesome的CDN
首先到fontAwesome的官網點擊「start for free」領取CDN
輸入信箱會寄一封email領取信
接著就是將CDN碼貼在<head>標籤裡
<head>
<title>方歐神</title>
<-- 引入下方這段程式碼 -->
<script src="<https://kit.fontawesome.com/3a056adcda.js>" crossorigin="anonymous"></script>
<-- 引入上方這段程式碼 -->
</head>
2. 使用icon
到官網選擇自己喜歡的icon
點擊icon後有一段HTML程式碼,把它貼在HTML裡就可以使用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">
<title>人生第一顆icon在這</title>
<-- 引入fontAwesome -->
<script src="https://kit.fontawesome.com/3a056adcda.js" crossorigin="anonymous"></script>
</head>
<body>
<-- 使用fontAwesome -->
<i class="fas fa-shopping-cart"></i>
</body>
</html>