如何在網站引用 Font Awesome 圖標 – 創作者學苑

引用 CDN 連結

於網站

與之間引用 Font Awesome v5.10.2 版本 CDN 連結：

放置方式可參考   用 Advanced Ads 在網站放置代碼

※ 須留意主題本身是否有引用其他版本的 Font Awesome CDN

 

若主題本身有引用舊版 CDN 連結該怎麼處理?

如果依照上述步驟引用CDN後，網站原先的圖標變成方塊狀(破圖)，代表網站主題可能有引用舊版的CDN
這時就不能同時引用最新版本的 Font Awesome ，請跳過 CDN引用步驟，直接添加需要的圖標
v4.7.0 版 選擇圖標請參考：https://fontawesome.com/v4.7.0/icons/

如果想驗證是否有舊版的CDN，可以於網頁滑鼠右鍵開啟「檢視網頁原始碼」，搜尋「font-awesome」檢查網站主題原先是否有引用其他版本 CDN 連結，類似於：

 

前往 Font Awesome 選擇圖標

選擇「免費版icon」與需要的圖標分類

 

選擇需要的圖標

 

點擊複製圖標編號

 

圖標使用範例 (使用CSS)

以下示範 在 CSS 偽元素 ( before 與 after ) 使用圖標~

準備要使用圖標的 class名稱與HTML標籤

範例為在超連結前放置圖標

創作者學苑連結

 

於「外觀>>自訂>>附加的 CSS」貼上代碼

.zi_link a {
text-decoration:none; /* 超連結不顯示底線 */
color: #58acff; /* 超連結顏色 */
}
.zi_link a:before {
margin-right: 10px;
content: "\填入需要的圖標代號"; /* 圖標編號 */
font-family: 'Font Awesome\ 5 Free';
font-weight: 900;
color:#005dba; /* 圖標顏色 */
}

 

舊版圖標使用方式

請將上述範例中的

font-family: 'Font Awesome\ 5 Free';

更換成

font-family: FontAwesome;

 

 

圖標放大可參考 官方教學

圖標旋轉可參考 官方教學

圖標動畫可參考 官方教學

或用  Font Awesome Animation 並引用