logo标签列表

这是HTML中与此 ▲ 或此 ▼ 相关的字符代码。

htmlcssunicodecharacterhtml-entities
67

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

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

7
请不要将此标记为ASCII。这些字符远远超出了ASCII范围。Unicode可能更加适合。 - Joachim Sauer
这个链接应该提供了你需要的所有内容。 - Steve
如果这个问题被关闭了，那么这个问题也应该被关闭。 - Ciro Santilli OurBigBook.com
6个回答
92

四面朝向的大和小黑色三角形可以这样表示：

▲ ▲

▴ ▴

▶ ▶

▸ ▸

► ►

▼ ▼

▾ ▾

◀ ◀

◂ ◂

◄ ◄

5
请注意：▶和◀在Edge浏览器中显示为带有白色箭头的蓝色框，无法进行样式设置。在所有其他浏览器中正常显示。 - Vijay Jagdale
此外，其他的左/右指针 ► 和 ◄ 在 IE 和 Edge 的按钮内无法正确渲染。我不得不使用 ⮜ 和 ⮞。 - Vijay Jagdale
85

我通常使用优秀的Gucharmap查找Unicode字符。在最近的Linux安装中，它在Gnome下以“字符映射”（Character Map）的名称安装。我不知道Windows或Mac OS X是否有任何类似的工具，但它的主页列出了一些。

3
感谢提醒我使用“字符映射”。这是一个非常方便的小工具。 - magicalex
42

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

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

HTML：

▲
▼

方法二：使用十六进制 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";
}

这三种方法的输出应该相同。对于其他符号，也有同样的三个选项。甚至有第四个选项，允许您使用基于字符串的引用（例如，&hearts; 显示 ♥）。

你可以使用像Unicode-table.com 这样的参考网站查找哪些图标在 UNICODE 中受支持以及它们对应的代码。例如，您可以在http://unicode-table.com/en/25BC/上找到向下三角形的值。

请注意，这些方法仅适用于每个浏览器默认可用的图标。对于像☃,❄,★,☂,☭,⎗ 或 ⎘这样的符号，这种情况要少得多。虽然可以为其他 UNICODE 符号提供跨浏览器支持，但过程会更加复杂。

如果您想了解如何添加对不常见的 UNICODE 字符的支持，请参见创建带有 Unicode 补充多语言平面符号的 Web 字体 了解更多信息。

背景图像

完全不同的策略是使用背景图像而不是字体。为了获得最佳性能，最好通过对其进行 base 编码将图像嵌入到 CSS 文件中，就像 @weasel5i2 和 @Obsidian 提到的那样。我建议使用 SVG 而不是 GIF，因为这既有助于性能，又有助于符号的清晰度。

以下代码是 enter image description here 图标的 SVG 版本的 base64 编码：

/* 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实体来表示它。
  • 一些符号可以在不使用Web字体的情况下显示。大多数符号不能。
  • 当将字符嵌入HTML中时，同一符号的多次使用意味着符号的重复。当将该文件嵌入CSS中时，不需要重复。
  • 您可以使用color、font-size、line-height、background-color或其他与字体相关的样式规则来更改图标的显示
  • 您不需要特殊的技术知识
  • 所有主要浏览器都支持，包括旧版本的IE

个人而言，建议仅在需要多种颜色且这些颜色不能通过color、background-color和其他与颜色相关的CSS规则进行实现时才使用背景图像。

使用SVG图像的主要优点是可以为符号的不同组件赋予自己的样式。如果将SVG XML代码嵌入HTML文档中，则这与样式化HTML非常相似。但这将导致网页使用HTML标记和SVG标记，这可能会严重降低网页的可读性。如果符号在多个页面上重复出现，则会增加额外的代码冗余，并且需要考虑旧版本的IE是否支持或支持受限的SVG。

2
这比被接受的答案要详尽得多！干得好！ - Sean the Bean
13

您不需要使用字符代码；只需使用UTF-8并将它们直接放入即可，如下所示：

▲▼

如果你一定要使用实体，它们分别为 &#x25b2; 和 &#x25bc;。

4

&#9650;是Unicode编码的黑色向上三角形（▲），而&#9660;则是黑色向下三角形（▼）。

你可以直接将这些字符（从网页上复制）插入到这个网站进行查询。

1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接