在网页上使用图标字体
要在 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 实体代码更容易记忆。