關於引入免費好用的icon這檔事(feat. font Awesome)

lowking shih

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>

關於引入免費好用的icon這檔事(feat. font Awesome)

Written by lowking shih