从哪里可以得到一个右箭头字符？答案

【问题标题】：From where can I get a right pointing arrow character?从哪里可以得到一个右箭头字符？
【发布时间】：2011-11-06 01:16:52
【问题描述】：

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

【问题讨论】：

为什么不使用图像并将其放入 img 标签中？
我不相信标准字符集中存在这样的字符。
您也许可以通过Unicode character set 找到接近的东西。
@Johan，图像比 html 字符占用更多带宽，因此如果他需要功能（如面包屑），则采用非图像路线会更好。这还没有谈到可访问性。
@Johan 每当可以使用字符而不是图像时，作为拇指规则，应该使用它。一个 Unicode 字符需要 2 个字节，我怀疑图像可以降低 :) 更不用说额外的潜在 HTTP 请求了。

标签： html

【解决方案1】：

它是一个 unicode 字符：▶ = &#9654;

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

见：What characters can be used for up/down triangle (arrow without stem) for display in HTML?

【讨论】：

类似的字符是#25BA：fileformat.info/info/unicode/char/25ba/index.htm

【解决方案2】：

请参阅 Here。你要找的角色是▶，&#9654;

【讨论】：

【解决方案3】：

喜欢这个▷？

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

【讨论】：

为什么？他发布的图片有一个白色箭头。我错过了什么吗？
是的，它是一个带有color: white; 的黑色箭头。并不是说你的箭是空的，而他的箭是满的:)
哦，有道理。那好吧。也许有人会来这里用一个空心的。

【解决方案4】：

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

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

HTML：

&#9654;

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

HTML：

&#x25B6;

方法三：直接使用字符

HTML：

▶

方法4：使用CSS

HTML：

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

CSS：

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

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

您可以使用 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。

【讨论】：

【解决方案5】：

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

【讨论】：