我从哪里可以获得一个右指向箭头字符？

Question

有人知道我在哪里可以找到这个http://screencast.com/t/Od362Z8Glgu的字符吗？我的意思是那个箭头，我需要一个和那个一样的箭头来复制并粘贴到我的html文件中。

- Uffo

---

为什么不使用图片并将其放入img标签中？ - Johan

我不相信标准字符集中存在这样的字符。 - Michael Mior

你可以浏览Unicode字符集，找到相似的内容。 - Brad Christie

@Johan，图像所需的带宽比HTML字符要多，因此，如果他需要功能（如面包屑导航），则选择非图像路径更好。这还没有考虑到无障碍性问题。 - Itai Sagi

@Johan 每当可以使用字符代替图像时，应该作为一个经验法则使用字符。Unicode字符占用2个字节，我怀疑图像无法更低 :) 更不用说额外的HTTP请求了。 - Madara's Ghost

Answer 1

这是一个 Unicode 字符：▶ = ▶

http://www.fileformat.info/info/unicode/char/25b6/index.htm

参见：在 HTML 中，有哪些字符可用于显示不带干蒂的上下三角形箭头？

- Diodeus - James MacFarlane

---

一个类似的字符是#25BA：http://www.fileformat.info/info/unicode/char/25ba/index.htm - Blazemonger

Answer 2

请看这里。你要找的字符是▶，▶

- Madara's Ghost

Answer 3

像这样 ▷？

http://www.fileformat.info/info/unicode/char/25b7/index.htm

- Kris Harper

---

为什么？他发布的图片有一个白色箭头。我错过了什么吗？ - Kris Harper

是的，它是一个带有 color: white; 的 黑色箭头。请注意，您的箭头是空心的，而他的是实心的 :) - Madara's Ghost

哦，那很有道理。好吧，也许会有人来这里使用一个空心的。 - Kris Harper

Answer 4

有几种正确的方法可以显示一个向右的三角形。

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

HTML：

▶

---

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

HTML：

▶

---

方法三：直接使用字符

HTML：

▶

---

方法四：使用CSS

HTML：

<span class='icon-right'></span>

CSS：

.icon-right:before {
    content: "\25B6";
}

---

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

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

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

如果你想知道如何添加对不常见的UNICODE字符的支持，请参考使用Unicode补充多语言平面符号创建网页字体以获取更多关于如何实现此功能的信息。

---

背景图片

一种完全不同的策略是使用背景图片而不是字体。为了获得最佳性能，最好通过基本编码将图像嵌入到CSS文件中，正如@weasel5i2和@Obsidian所提到的那样。我建议使用SVG而不是GIF，因为这既有利于性能，又有利于符号的清晰度。

以下代码是图标的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的支持没有或有限。

- John Slegers

Answer 5

最好看的右箭头，特别适合面包屑导航是“右角箭头”› HTML 实体

- Daniel Moss