当前位置：文江博客话题详情

此 ▲ 的 HTML 字符代码或者这个▼

发布于 2024-11-08 03:27:21 字数 112 浏览 6 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

兰花执着 2024-11-15 03:27:21

面向4个方向的大小黑色三角形可以表示为：

▲ ▲

▴ ▴

▶< /code> ▶

▸ ▸

► ►

▼ ▼

▾ ▾

◀ ◀

◂ > ◂

◄ ◄

回复收藏 0 原文

爱殇璃 2024-11-15 03:27:21

▲ 是 U+25B2 黑色上指三角形，它的十进制字符实体是 ▲
▼ 是 U+25BC 黑色下指三角形它的十进制字符实体是 ▼

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

回复收藏 0 原文

唯憾梦倾城 2024-11-15 03:27:21

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

方法 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/。

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

如果您想了解如何添加对不太常见的 UNICODE 字符的支持，请参阅使用 Unicode 补充多语言平面符号创建网络字体，了解有关操作方法的更多信息这。

背景图像

一种完全不同的策略是使用背景图像而不是字体。为了获得最佳性能，最好通过对图像进行基本编码来将图像嵌入到 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 实体，
当 XML 代码嵌入到 HTML 中时，多次使用同一符号意味着符号重复。将文件嵌入 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

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

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

There are several correct ways to display a down-pointing and upward-pointing triangle.

Method 1 : use decimal HTML entity

HTML :

▲
▼

Method 2 : use hexidecimal HTML entity

HTML :

▲
▼

Method 3 : use character directly

HTML :

▲
▼

Method 4 : use CSS

HTML :

<span class='icon-up'></span>
<span class='icon-down'></span>

CSS :

.icon-up:before {
    content: "\25B2";
}

.icon-down:before {
    content: "\25BC";
}

Each of these three methods should have the same output. For other symbols, the same three options exist. Some even have a fourth option, allowing you to use a string based reference (eg. ♥ to display ♥).

You can use a reference website like Unicode-table.com to find which icons are supported in UNICODE and which codes they correspond with. For example, you find the values for the down-pointing triangle at http://unicode-table.com/en/25BC/.

Note that these methods are sufficient only for icons that are available by default in every browser. For symbols like ☃,❄,★,☂,☭,⎗ or ⎘, this is far less likely to be the case. While it is possible to provide cross-browser support for other UNICODE symbols, the procedure is a bit more complicated.

If you want to know how to add support for less common UNICODE characters, see Create webfont with Unicode Supplementary Multilingual Plane symbols for more info on how to do this.

Background images

A totally different strategy is the use of background-images instead of fonts. For optimal performance, it's best to embed the image in your CSS file by base-encoding it, as mentioned by eg. @weasel5i2 and @Obsidian. I would recommend the use of SVG rather than GIF, however, is that's better both for performance and for the sharpness of your symbols.

This following code is the base64 for and SVG version of the enter image description here icon :

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

When to use background-images or fonts

For many use cases, SVG-based background images and icon fonts are largely equivalent with regards to performance and flexibility. To decide which to pick, consider the following differences:

SVG images

They can have multiple colors
They can embed their own CSS and/or be styled by the HTML document
They can be loaded as a seperate file, embedded in CSS AND embedded in HTML
Each symbol is represented by XML code or base64 code. You cannot use the character directly within your code editor or use an HTML entity
Multiple uses of the same symbol implies duplication of the symbol when XML code is embedded in the HTML. Duplication is not required when embedding the file in the CSS or loading it as a seperate file
You can not use color, font-size, line-height, background-color or other font related styling rules to change the display of your icon, but you can reference different components of the icon as shapes individually.
You need some knowledge of SVG and/or base64 encoding
Limited or no support in old versions of IE

Icon fonts

An icon can have but one fill color, one background color, etc.
An icon can be embedded in CSS or HTML. In HTML, you can use the character directly or use an HTML entity to represent it.
Some symbols can be displayed without the use of a webfont. Most symbols cannot.
Multiple uses of the same symbol implies duplication of the symbol when your character embedded in the HTML. Duplication is not required when embedding the file in the CSS.
You can use color, font-size, line-height, background-color or other font related styling rules to change the display of your icon
You need no special technical knowledge
Support in all major browsers, including old versions of IE

Personally, I would recommend the use of background-images only when you need multiple colors and those color can't be achieved by means of color, background-color and other color-related CSS rules for fonts.

The main benefit of using SVG images is that you can give different components of a symbol their own styling. If you embed your SVG XML code in the HTML document, this is very similar to styling the HTML. This would, however, result in a web page that uses both HTML tags and SVG tags, which could significantly reduce the readability of a webpage. It also adds extra bloat if the symbol is repeated across multiple pages and you need to consider that old versions of IE have no or limited support for SVG.

回复收藏 0 原文