這個 ▲ 或這個 ▼ 的 HTML 字符代碼

Question

這個向上箭頭 ( ▲ ) 和它向下的狗版本 ( ▼ ) 的 HTML 實體字符代碼是什么？

我一直在使用 GIF 來表示這些箭頭，因為我不知道它們的代碼。

Answer 1

• ▲ 是U+25B2 BLACK UP-POINTING TRIANGLE ，它的十進制字符實體是▲
• ▼ 是U+25BC BLACK DOWN-POINTING TRIANGLE ，它的十進制字符實體是▼

我通常使用優秀的 Gucharmap來查找 Unicode 字符。 它安裝在所有最近的帶有 Gnome 的 Linux 安裝中，名稱為“Character Map”。 我不知道有任何適用於 Windows 或 Mac OS X 的等效工具，但它的主頁列出了一些。

Answer 2

面向 4 個方向的大小黑色三角形可以表示為：

▲ ▲

▴ ▴

▶ ▶

▸ ▸

► ►

▼ ▼

▾ ▾

◀ ◀

◂ ◂

◄ ◄

Answer 3

有幾種正確的方法可以顯示向下和向上的三角形。

方法 1：使用十進制 HTML 實體

HTML :

▲
▼

---

方法 2：使用十六進制 HTML 實體

HTML :

▲
▼

---

方法三：直接使用字符

HTML :

▲
▼

---

方法四：使用CSS

HTML :

<span class='icon-up'></span>
<span class='icon-down'></span>

CSS :

.icon-up:before {
    content: "\25B2";
}

.icon-down:before {
    content: "\25BC";
}

---

這三種方法中的每一種都應該具有相同的輸出。 對於其他符號，存在相同的三個選項。 有些甚至還有第四個選項，允許您使用基於字符串的引用（例如♥來顯示 ♥）。

您可以使用像Unicode-table.com這樣的參考網站來查找 UNICODE 支持哪些圖標以及它們對應的代碼。 例如，您可以在http://unicode-table.com/en/25BC/ 找到向下三角形的值。

請注意，這些方法僅適用於每個瀏覽器中默認可用的圖標。 對於像 ☃、❄、★、☂、☭、⎗ 或 ⎘ 這樣的符號，這種情況的可能性要小得多。 雖然可以為其他 UNICODE 符號提供跨瀏覽器支持，但過程有點復雜。

如果您想知道如何添加對不太常見的 UNICODE 字符的支持，請參閱使用 Unicode 補充多語言平面符號創建 webfont 以獲取有關如何執行此操作的更多信息。

---

背景圖片

一個完全不同的策略是使用背景圖像而不是字體。 為了獲得最佳性能，最好通過基本編碼將圖像嵌入到您的 CSS 文件中，如 eg. 所述。 @weasel5i2 和 @Obsidian。 我建議使用 SVG 而不是 GIF，但是，這對性能和符號的清晰度都更好。

以下代碼是 base64 for 和 SVG 版本的圖標 ：

/* size: 0.9kb */
url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAxNiAyOCI+PGcgaWQ9Imljb21vb24taWdub3JlIj48L2c+PHBhdGggZD0iTTE2IDE3cTAgMC40MDYtMC4yOTcgMC43MDNsLTcgN3EtMC4yOTcgMC4yOTctMC43MDMgMC4yOTd0LTAuNzAzLTAuMjk3bC03LTdxLTAuMjk3LTAuMjk3LTAuMjk3LTAuNzAzdDAuMjk3LTAuNzAzIDAuNzAzLTAuMjk3aDE0cTAuNDA2IDAgMC43MDMgMC4yOTd0MC4yOTcgMC43MDN6TTE2IDExcTAgMC40MDYtMC4yOTcgMC43MDN0LTAuNzAzIDAuMjk3aC0xNHEtMC40MDYgMC0wLjcwMy0wLjI5N3QtMC4yOTctMC43MDMgMC4yOTctMC43MDNsNy03cTAuMjk3LTAuMjk3IDAuNzAzLTAuMjk3dDAuNzAzIDAuMjk3bDcgN3EwLjI5NyAwLjI5NyAwLjI5NyAwLjcwM3oiIGZpbGw9IiMwMDAwMDAiPjwvcGF0aD48L3N2Zz4=

何時使用背景圖像或字體

對於許多用例，基於 SVG 的背景圖像和圖標字體在性能和靈活性方面基本相同。 要決定選擇哪個，請考慮以下差異：

SVG 圖像

• 它們可以有多種顏色
• 他們可以嵌入自己的 CSS 和/或由 HTML 文檔設置樣式
• 它們可以作為單獨的文件加載，嵌入在 CSS 中和嵌入在 HTML 中
• 每個符號都由 XML 代碼或 base64 代碼表示。 您不能直接在代碼編輯器中使用該字符或使用 HTML 實體
• 當 XML 代碼嵌入 HTML 時，同一符號的多次使用意味着符號的重復。 將文件嵌入 CSS 或將其作為單獨文件加載時不需要重復
• 您不能使用color 、 font-size 、 line-height 、 background-color或其他與字體相關的樣式規則來更改圖標的顯示，但您可以將圖標的不同組件單獨引用為形狀。
• 您需要了解 SVG 和/或 base64 編碼
• 對舊版本 IE 的支持有限或不支持

圖標字體

• 一個圖標只能有一種填充顏色、一種背景顏色等。
• 圖標可以嵌入在 CSS 或 HTML 中。 在 HTML 中，可以直接使用字符，也可以使用 HTML 實體來表示。
• 有些符號可以在不使用 webfont 的情況下顯示。 大多數符號不能。
• 當您的字符嵌入 HTML 時，同一符號的多次使用意味着該符號的重復。 在 CSS 中嵌入文件時不需要重復。
• 您可以使用color 、 font-size 、 line-height 、 background-color或其他與字體相關的樣式規則來更改圖標的顯示
• 您不需要特殊的技術知識
• 支持所有主流瀏覽器，包括舊版 IE

就我個人而言，我建議僅當您需要多種顏色並且這些顏色無法通過color 、 background-color和其他與顏色相關的字體 CSS 規則來實現時才使用 background-images。

使用 SVG 圖像的主要好處是您可以為符號的不同組件賦予自己的樣式。 如果您將 SVG XML 代碼嵌入到 HTML 文檔中，這與設置 HTML 樣式非常相似。 但是，這會導致網頁同時使用 HTML 標簽和 SVG 標簽，這會顯着降低網頁的可讀性。 如果該符號在多個頁面中重復出現，並且您需要考慮舊版本的 IE 對 SVG 沒有或有限的支持，它還會增加額外的膨脹。

Answer 4

您不需要使用字符代碼； 只需使用 UTF-8 並將它們放在字面上； 像這樣：

▲▼

如果你絕對必須使用▲ ，它們是▲ 和▼ ， 分別。

Answer 5

▲ 是 Unicode 黑色向上指三角形 (▲) 而▼ 是黑色的向下三角形 (▼)。

您可以將字符（從網絡復制）插入此站點以進行查找。

Answer 6

檢查此頁面http://www.alanwood.net/unicode/geometric_shapes.html ，第一個是“9650 ▲ 25B2 BLACK UP-POINTING TRIANGLE（出現在 WGL4 中）”和第二個“9660 ▼ 25BC BLACK DOWN-POINTING TRIANGLE（出現在WGL4)”。