我正在寻找一个HTML或ASCII字符,这是一个三角形指向向上或向下,以便我可以使用它作为拨动开关。
我找到了↑(↑)和↓(↓) -但它们的词干很窄。我只是寻找HTML箭头“头”。
我正在寻找一个HTML或ASCII字符,这是一个三角形指向向上或向下,以便我可以使用它作为拨动开关。
我找到了↑(↑)和↓(↓) -但它们的词干很窄。我只是寻找HTML箭头“头”。
当前回答
有几种正确的方法来显示指向下的三角形。
方法一:使用十进制HTML实体
HTML:
▼
方法二:使用十六进制HTML实体
HTML:
▼
方法三:直接使用字符
HTML:
▼
方法四:使用CSS
HTML:
<span class='icon-down'></span>
CSS:
.icon-down:before {
content: "\25BC";
}
这三个方法中的每一个都应该有相同的输出。对于其他符号,同样存在三个选项。有些甚至有第四个选项,允许您使用基于字符串的引用(例如。心;显示♥)。
您可以使用类似Unicode-table.com的参考网站来查找UNICODE支持哪些图标以及它们对应的代码。例如,您可以在http://unicode-table.com/en/25BC/上找到指向下的三角形的值。
请注意,这些方法仅对每个浏览器中默认可用的图标有效。对于像☃,´,★,☂,☭,⎗或⎘这样的符号,这种情况的可能性要小得多。虽然可以为其他UNICODE符号提供跨浏览器的支持,但这个过程有点复杂。
如果你想知道如何添加对不太常见的UNICODE字符的支持,请参阅使用UNICODE补充多语言平面符号创建webfont以获得更多关于如何做到这一点的信息。
背景图片
一个完全不同的策略是使用背景图片而不是字体。为了获得最佳性能,最好通过基本编码将图像嵌入到CSS文件中,如eg所述。@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中嵌入文件或将其作为单独的文件加载时,不需要复制 您不能使用颜色、字体大小、行高、背景颜色或其他与字体相关的样式规则来更改图标的显示,但您可以将图标的不同组件单独引用为形状。 您需要了解SVG和/或base64编码 旧版本IE的支持有限或不支持
图标的字体
一个图标只能有一种填充色、一种背景色等。 图标可以嵌入到CSS或HTML中。在HTML中,可以直接使用字符,也可以使用HTML实体来表示字符。 一些符号可以在不使用webfont的情况下显示。大多数符号都不能。 当你的字符嵌入到HTML中时,多次使用同一个符号意味着重复该符号。在CSS中嵌入文件时,不需要复制。 您可以使用颜色、字体大小、行高、背景色或其他与字体相关的样式规则来更改图标的显示 你不需要特殊的技术知识 支持所有主流浏览器,包括旧版本的IE
就我个人而言,只有当你需要多种颜色,而这些颜色无法通过颜色、背景颜色和其他与字体颜色相关的CSS规则来实现时,我才会推荐使用background-images。
使用SVG图像的主要好处是可以为符号的不同组件赋予它们自己的样式。如果您将SVG XML代码嵌入到HTML文档中,这与样式化HTML非常相似。然而,这将导致网页同时使用HTML标记和SVG标记,这可能会显著降低网页的可读性。如果符号在多个页面中重复出现,还会增加额外的负担,而且您需要考虑到旧版本的IE没有或有限支持SVG。
其他回答
有几种正确的方法来显示指向下的三角形。
方法一:使用十进制HTML实体
HTML:
▼
方法二:使用十六进制HTML实体
HTML:
▼
方法三:直接使用字符
HTML:
▼
方法四:使用CSS
HTML:
<span class='icon-down'></span>
CSS:
.icon-down:before {
content: "\25BC";
}
这三个方法中的每一个都应该有相同的输出。对于其他符号,同样存在三个选项。有些甚至有第四个选项,允许您使用基于字符串的引用(例如。心;显示♥)。
您可以使用类似Unicode-table.com的参考网站来查找UNICODE支持哪些图标以及它们对应的代码。例如,您可以在http://unicode-table.com/en/25BC/上找到指向下的三角形的值。
请注意,这些方法仅对每个浏览器中默认可用的图标有效。对于像☃,´,★,☂,☭,⎗或⎘这样的符号,这种情况的可能性要小得多。虽然可以为其他UNICODE符号提供跨浏览器的支持,但这个过程有点复杂。
如果你想知道如何添加对不太常见的UNICODE字符的支持,请参阅使用UNICODE补充多语言平面符号创建webfont以获得更多关于如何做到这一点的信息。
背景图片
一个完全不同的策略是使用背景图片而不是字体。为了获得最佳性能,最好通过基本编码将图像嵌入到CSS文件中,如eg所述。@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中嵌入文件或将其作为单独的文件加载时,不需要复制 您不能使用颜色、字体大小、行高、背景颜色或其他与字体相关的样式规则来更改图标的显示,但您可以将图标的不同组件单独引用为形状。 您需要了解SVG和/或base64编码 旧版本IE的支持有限或不支持
图标的字体
一个图标只能有一种填充色、一种背景色等。 图标可以嵌入到CSS或HTML中。在HTML中,可以直接使用字符,也可以使用HTML实体来表示字符。 一些符号可以在不使用webfont的情况下显示。大多数符号都不能。 当你的字符嵌入到HTML中时,多次使用同一个符号意味着重复该符号。在CSS中嵌入文件时,不需要复制。 您可以使用颜色、字体大小、行高、背景色或其他与字体相关的样式规则来更改图标的显示 你不需要特殊的技术知识 支持所有主流浏览器,包括旧版本的IE
就我个人而言,只有当你需要多种颜色,而这些颜色无法通过颜色、背景颜色和其他与字体颜色相关的CSS规则来实现时,我才会推荐使用background-images。
使用SVG图像的主要好处是可以为符号的不同组件赋予它们自己的样式。如果您将SVG XML代码嵌入到HTML文档中,这与样式化HTML非常相似。然而,这将导致网页同时使用HTML标记和SVG标记,这可能会显著降低网页的可读性。如果符号在多个页面中重复出现,还会增加额外的负担,而且您需要考虑到旧版本的IE没有或有限支持SVG。
这个似乎暗示030和031是上下三角形。
(正如bobince指出的,这似乎不是ASCII标准)
这里是另一个-ᐞ- Unicode U+141E / CANADIAN syllable GLOTTAL STOP
Unicode箭头头:
▲- u + 25b2黑色向上三角形 ▼- u + 25bc黑色下指向三角形 ▴- u + 25b4黑色小向上三角形 ` ` ` ` ` ` ` ` ` ` ` ` ` ` u + 25be黑色向下三角形
对于▲和▼使用▲和& # x25BC;如果不能直接包含Unicode字符(使用UTF-8!)
注意,对较小版本的字体支持不是很好。最好使用小字体的大版本。
更多的Unicode箭头在:
http://en.wikipedia.org/wiki/Arrow_%28symbol%29#Arrows_in_Unicode http://en.wikipedia.org/wiki/Geometric_Shapes
最后,这些箭头不是ASCII,包括↑和↓:它们是Unicode。
由于您正在使用这些箭头作为拨动开关,您可能需要考虑使用以下样式而不是unicode字符在html元素中创建这些箭头。
.upparrow {
height: 0;
width: 0;
border: 4px solid transparent;
border-bottom-color: #000;
}
.downarrow {
height: 0;
width: 0;
border: 4px solid transparent;
border-top-color: #000;
}
http://jsfiddle.net/FrsGR/