此▲或此▼的HTML字符代码

Question

此向上箭头（▲）及其向下的狗版本（▼）有哪些HTML实体字符代码？

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

Answer 1

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

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

Answer 2

因此可以表示面向4个方向的大小黑三角：

▲▲

▴▴

▶▶

▸▸

►►

▼▼

▾▾

◀◀

◂◂

◄◄

Answer 3

您不需要使用字符代码;只需使用UTF-8并按字面意思将它们放入;像这样：

▲▼

如果你绝对必须使用它们，那么它们就是＆amp;＃x25b2;和＆amp;＃x25bc;分别。

Answer 4

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

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

HTML：

▲
▼

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

HTML：

▲
▼

方法3：直接使用字符

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/ 处找到向下指向三角形的值。

请注意，这些方法仅适用于每个浏览器中默认可用的图标。对于像☃，❄，★，☂，☭，⎗或symbols这样的符号，这种情况的可能性要小得多。虽然可以为其他UNICODE符号提供跨浏览器支持，但程序有点复杂。

如果您想知道如何添加对不太常见的UNICODE字符的支持，请参阅 Create webfont with Unicode Supplementary Multilingual Plane symbols 以获取有关如何执行此操作的详细信息。

背景图片

完全不同的策略是使用背景图像而不是字体。为了获得最佳性能，最好通过对其进行基本编码将图像嵌入CSS文件中，例如，如下所述。 @ 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实体
• 当HTML代码嵌入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实现字体规则。

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

Answer 5

▲是Unicode黑色向上指向三角形（▲），而▼是黑色向下指向三角形（▼）。

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

Answer 6

检查此页面http://www.alanwood.net/unicode/geometric_shapes.html，首先是“9650▲25B2 BLACK UP-POINTING TRIANGLE（存在于WGL4中）”和第二个“9660▼25BC黑色下降三角形（存在于WGL4中）”。