此 ▲ 或此 ▼ 的 HTML 字符代码

Posted 2023-02-24

【中文标题】此 ▲ 或此 ▼ 的 HTML 字符代码

【英文标题】：HTML character codes for this ▲ or this ▼

【发布时间】：2011-08-27 19:49:34

【问题描述】：

这个向上箭头 (▲) 及其向下的狗版本 (▼) 的 html 实体字符代码是什么？

我一直使用 GIF 来表示这些箭头，因为我不知道它们的代码。

【问题讨论】：

请不要将其标记为 ASCII。这些字符在 ASCII 范围之外 方式。 Unicode 可能更合适。

this link 应该为您提供所需的一切。

如果this other question 关闭了，那么这个也应该关闭。

【参考方案1】：

您不需要使用字符代码；只需使用 UTF-8 并按字面意思输入即可；像这样：

▲▼

如果您绝对必须使用这些实体，它们分别是 ▲ 和 ▼。

【参考方案2】：

有几种正确的方法来显示向下和向上的三角形。

方法一：使用十进制HTML实体

HTML：

▲
▼

---

方法2：使用十六进制HTML实体

HTML：

▲
▼

---

方法三：直接使用字符

HTML：

▲
▼

---

方法4：使用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 字符的支持，请参阅 Create webfont with Unicode Supplementary Multilingual Plane symbols 了解更多信息。

---

背景图片

一个完全不同的策略是使用背景图像而不是字体。为获得最佳性能，最好通过基本编码将图像嵌入到您的 CSS 文件中，如例如所提到的。 @weasel5i2 和 @Obsidian。我会推荐使用 SVG 而不是 GIF，但是这样会更好地提高性能和符号的清晰度。

以下代码是 图标的 base64 和 SVG 版本：

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

何时使用背景图片或字体

对于许多用例，基于 SVG 的背景图像和图标字体在性能和灵活性方面基本相同。要决定选择哪个，请考虑以下差异：

SVG 图像

它们可以有多种颜色 它们可以嵌入自己的 CSS 和/或由 HTML 文档设置样式 它们可以作为单独的文件加载，嵌入在 CSS 中和嵌入在 HTML 中 每个符号都由 XML 代码或 base64 代码表示。您不能直接在代码编辑器中使用该字符或使用 HTML 实体 在 HTML 中嵌入 XML 代码时，多次使用同一符号意味着重复该符号。将文件嵌入 CSS 或作为单独文件加载时不需要复制 您不能使用color、font-size、line-height、background-color 或其他与字体相关的样式规则来更改图标的显示，但您可以将图标的不同组件单独引用为形状。 您需要一些 SVG 和/或 base64 编码方面的知识 旧版本的 IE 支持有限或不支持

图标字体

一个图标只能有一种填充颜色、一种背景颜色等。 图标可以嵌入到 CSS 或 HTML 中。在 HTML 中，可以直接使用字符，也可以使用 HTML 实体来表示。 有些符号可以在不使用网络字体的情况下显示。大多数符号不能。 同一符号的多次使用意味着当您的字符嵌入 HTML 时符号重复。在 CSS 中嵌入文件时不需要复制。 您可以使用color、font-size、line-height、background-color 或其他与字体相关的样式规则来更改图标的显示方式 您不需要特殊的技术知识 支持所有主流浏览器，包括旧版 IE

就个人而言，我建议仅在您需要多种颜色并且这些颜色无法通过color、background-color 和其他与颜色相关的字体 CSS 规则来实现时使用背景图像。

使用 SVG 图像的主要好处是您可以为符号的不同组件赋予自己的样式。如果将 SVG XML 代码嵌入 HTML 文档中，这与 HTML 样式非常相似。但是，这会导致网页同时使用 HTML 标签和 SVG 标签，这会显着降低网页的可读性。如果符号在多个页面中重复，它还会增加额外的膨胀，并且您需要考虑旧版本的 IE 不支持或有限支持 SVG。

【讨论】：

这比公认的答案更彻底！干得好！

【参考方案3】：

面对四个方向的大小黑色三角形可以这样表示：

▲▲

▴▴

▶ ▶

▸▸

► ►

▼▼

▾▾

◀◀

◂◂

◄◄

【讨论】：

注意：▶和 ◀在 Edge 中显示为带有白色箭头的蓝色框，并且无法进行风格化。它们在所有其他浏览器中正常显示。

另外，其他左/右指针 ►和 ◄不要在 IE 和边缘的按钮内正确呈现。我求助于使用 ⮜和 ⮞

【参考方案4】：

▲是U+25B2 BLACK UP-POINTING TRIANGLE，它的十进制字符实体是▲ ▼是U+25BC BLACK DOWN-POINTING TRIANGLE，它的十进制字符实体是▼

我通常使用the excellent Gucharmap 来查找Unicode 字符。它安装在所有最近使用 Gnome 安装的 Linux 上，名称为“Character Map”。我不知道任何适用于 Windows 或 Mac OS X 的等效工具，但它的主页列出了一些。

【讨论】：

+1 提醒我注意“字符图”。多么方便的小实用程序。

【参考方案5】：

▲ 是 Unicode 黑色向上三角形 (▲)，▼ 是黑色向下三角形 (▼)。

您只需将字符（从网络复制）插入this site 进行查找。

【参考方案6】：

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