Zi 字媒體

Table of Contents 引用 CDN 連結 若主題本身有引用舊版 CDN 連結該怎麼處理? 前往 Font Awesome 選擇圖標選擇「免費版icon」與需要的圖標分類 選擇需要的圖標 點擊複製圖標編號 圖標使用範例 (使用CSS) 準備要使用圖標的 class名稱與HTML標籤 於「外觀>>自訂>>附加的 CSS」貼上代碼 舊版圖標使用方式 引用 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 並引用