此▲或此▼的HTML字符代码

Question

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

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

Answer 1

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

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

Answer 2

面向4个方向的大小黑三角可以表示如下:

▲ ▲

▴ ▴

▶ ▶

▸ ▸

► ►

▼ ▼

▾ ▾

◀ ◀

◂ ◂

◄ ◄

Answer 3

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

方法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字符的支持,请参阅使用Unicode Supplementary Multilingual Plane符号创建webfont以获取有关如何执行此操作的更多信息.

背景图片

一种完全不同的策略是使用背景图像而不是字体.为了获得最佳性能,最好通过对其进行基本编码将图像嵌入到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实体
• 当XML代码嵌入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 4

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

??

如果你绝对必须使用entites,他们是▲ 和▼分别.