在網頁上使用圖示字型
要在 HTML 中使用圖示，你可以執行以下各項操作：
<!-- Method 1 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family for an entire HTML element -->
<!-- Define your icon fonts in your CSS font-family after your regular fonts -->
<!-- This means that regular characters are default. Icons are a fallback -->
<!-- Use UTF-8 characters directly in your HTML for improved human readability -->
<div class="rate"><p>I rate this movie ★★★★☆!!</p></div>
<!-- Method 2 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family for an entire HTML element -->
<!-- Define your icon fonts in your CSS font-family after your regular fonts -->
<!-- This means that regular characters are default. Icons are a fallback -->
<!-- Use entity codes in your HTML when UTF-8 support is uncertain -->
<div class="rate"><p>I rate this movie ★★★★☆!!</p></div>
<!-- Method 3 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons but not the HTML elements that include them -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use UTF-8 characters directly in your HTML for improved human readability -->
<p>I rate this movie <span class="icon">★★★★☆</span>!!</p>
<!-- Method 4 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons but not the HTML elements that include them -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use entity codes in your HTML when UTF-8 support is uncertain -->
<p>I rate this movie <span class="icon">★★★★☆</span>!!</p>
<!-- Method 5 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons and use a separate HTML tag for each icon -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use UTF-8 characters directly in your HTML for improved human readability -->
<p>I rate this movie
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">☆</span>
!!
</p>
<!-- Method 6 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons and use a separate HTML tag for each icon -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use entity codes in your HTML when UTF-8 support is uncertain -->
<p>I rate this movie
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">☆</span>
!!
</p>
<!-- Method 7-->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons and use a separate HTML tag for each icon -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use the 'content' style rule with a ':before selector' in your CSS -->
<p>I rate this movie
<span class="icon icon-star"></span>
<span class="icon icon-star"></span>
<span class="icon icon-star"></span>
<span class="icon icon-star"></span>
<span class="icon icon-star-unfilled"></span>
!!
</p>
如果你想選擇方法 7，則需要一些額外的 CSS 程式碼。這個 CSS 程式碼看起來像這樣：
.icon-star:before {
content: "\2605";
}
.icon-star-unfilled:before {
content: "\2606";
}
Iconic ， Font Awesome 或 Glyphicons 等圖示字型通常都使用方法 7.這樣可以避免從備忘單中複製貼上特殊字元或強制使用 HTML 實體。
然而，這是一種具有若干缺點的方法。首先，它需要支援:before CSS 選擇器以及對 UNICODE 字元使用轉義序列。IE6-7 和某些版本的 Webkit 都不提供此支援。
另一個缺點是你必須為每個圖示使用單獨的 HTML 標記，每個標記對應於圖示字型中的一個字元。與其他方法不同，方法 7 無法在 HTML 標記內顯示多個圖示。
但是，其他方法也有其自身的缺點。方法 1,3 和 5 要求你從備忘單中複製貼上字元或使用手段將字元本身放在程式碼中。你的程式碼編輯器可能無法顯示該字元，或者如果圖示字型使用該字元的非標準對映，則它可能會顯示與圖示字型中的字元不同的字元。
方法 1,3 和 5 還要求你的瀏覽器使用正確的編碼來顯示正確的字元。對於 UNICODE 字元，這不像 ASCII 字元那麼明顯。但是，應該通過在 HTML 文件的 head 中的某處新增元標記 <meta charset="utf-8" /> 來確保這一點。
方法 2,4 和 6 不要求你複製貼上字元，但它會使你的程式碼對人類的可讀性降低，並使程式碼的任何更改更容易出現人為錯誤。此外，你需要查詢要使用的每個圖示的 HTML 實體程式碼，或者你需要記住它們。雖然這同樣適用於方法 7 中使用的類，但這些類比 HTML 實體程式碼更容易記憶。