跳到內容
Font Awesome 文件
歡迎使用 Web Awesome，這是最大且最好的開放原始碼網路元件庫。
立即預訂！

網路上的裸 SVG

您可以將圖示新增為裸露的 SVG 到您的標記中，但您需要做一些繁重的工作才能讓它們相符。

基本用法

透過向量的功能，瀏覽器可以在短時間內繪製 SVG。只要將 SVG 程式碼直接加入您的 HTML 中即可。

現在幾點了…

<div class="time-to-get-ill">
  <style>
    .icon {
      width: 1em;
      height: 1em;
      vertical-align: -0.125em;
    }
  </style>
  What time is it...
  <svg xmlns="http://www.w3.org/2000/svg" class="icon" aria-hidden="true" focusable="false" viewBox="0 0 512 512">
    <path
      fill="currentColor"
      d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z"
    />
  </svg>
</div>

務必加入一些 CSS

但 SVG 精靈圖的缺點之一是需要額外的樣式才能讓它們正常運作。我們的 Font Awesome javascript 通常會處理這個問題，但在這種情況下，您需要自行處理。

以下是一個範例

<!-- Simple styling to size an SVG -->
<style>
  .icon {
    width: 2em;
    height: 2em;
    vertical-align: -0.125em;
  }
</style>