Icon應用

參考網站

(1) Font Awesome 第6版

網站連結：【Font Awesome 第6版】

▶️ 利用【Google搜尋 cdnjs.com】網站為例

參考連結：【什麼是 CDN？| CDN 的工作原理是什麼？】

  https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css

▶️ Awesome 參考網站

1. Awesome 【各版本】資訊

2. Awesome 【第6版 下載】資訊

3. Awesome 【第6版 樣式美化設定】資訊

▶️ Awesome 樣式名稱對照表

連結參考於 【第6版 Styling with Font Awesome#Full Style Names】

分類 Google翻譯 可用性 舊樣式 第6版後樣式名
Solid 堅硬的 Free Plan fas fa-solid
Regular 常規的 Pro Plans only(部份免費) far fa-regular
Light 光 Pro Plans only fal fa-light
Thin 薄的 Pro Plans only fat fa-thin
Duotone 雙色調 Pro Plans only fab fa-brands
Brands 品牌 Free Plan fab fa-brands

IconFinder

網站連結：【IconFinder】

Step2： 查看參考網站使用介紹

查看參考網站使用介紹

Step3-1 (方法1) ： 利用 i 標籤 或者 span 標籤 加入圖示

  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
    <style>
      i{padding-right: .5rem;}
      .fb { color:#1877F2;}
      .line { color:#00C300;}
      .ig {color: #E4405F;}
    </style>
  </head>
  <body>
    <ul class="i">
      <li class="fb"><i class="fab fa-facebook-square"></i>facebook</li>
      <li class="line"><i class="fab fa-line"></i>line</li>
      <li class="ig"><i class="fab fa-instagram-square"></i>Instagram</li>
    </ul>
  </body>

Step3-2 (方法2) ： 使用 unicode

使用 unicode 
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
    <style>
      .unicode li::before{
        font-family: "Font Awesome 6 Free";
        padding-right: .5rem;
      }
      .unicode .fb::before{ content:"f082"; }
      .unicode .line::before{ content:"f3c0"; }
      .unicode .ig::before{ content:"e055"; }
    </style>
  </head>
  <body>
    <ul class="unicode">
      <li class="fb">facebook</li>
      <li class="line">line</li>
      <li class="ig">Instagram</li>
    </ul>
  </body>