unicode - htm字符向上/ 向下的三角形( 箭头) 显示

  显示原文与译文双语对照的内容

我正在寻找一个HTML或者ASCII字符,它是一个向上或者向下的三角形,所以我可以使用它作为切换 switch 。

我找到了 ↑ ( ↑ ) 和 ↓ ( ↓ ),但是它们的词干狭窄。 我正在寻找HTML箭头"头部"。

时间:

Unicode箭头头:

  • ▲ - U+25B2黑色UP-POINTING三角形
  • ▼ - U+25BC黑色DOWN-POINTING三角形

如果不能直接包含Unicode字符,请使用 ▲▼

请注意,较小版本的字体支持不如。 最好使用较小字体中的大版本。

更多的Unicode箭头位于:

最后,这些箭头不是 ASCII,包括↑和 ↓: 它们是Unicode的。

于HTML相关实体.


▼ = ▼
▲ = ▲

抱歉,它们只在Unicode中。 : (

大的:

  • U+25B2 ( 黑色up-pointing三角形 ▲ )
  • U+25BC ( 黑色down-pointing三角形 ▼ )

大白色的:

  • U+25B3 ( 白色up-pointing三角形 △ )
  • U+25BD ( 白色down-pointing三角形 ▽ )

还有一些smalller三角形:

还有一些白色的:

还有一些"尖头"三角形。 你可以在维基百科中阅读更多内容:
http://en.wikipedia.org/wiki/Geometric_Shapes

但不幸的是,它们都是Unicode而不是 ASCII 。 如果你仍然想使用 ASCII,那么你可以使用一个图像文件,只使用 ^v 。 ( 就像移动版的谷歌地图 一样 这就是指 移动 谷歌地图 )

选项 1: UNICODE列排序箭头

我找到了一个非常方便的字符列分类器。 ( 看起来不错的upscaled ) 。

Unicode table column sort arrows


再加重一些unicode箭头。

你可以直接从下面的页面复制它们,也可以使用代码。

每行箭头从左到右编号:


0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F

只需在关闭semi-colon之前插入相应的数字/字母。


ș


Ț


ț


Ȝ


ȝ


Ȟ


ȟ


额外 HTML unicode符号

其他有用的unicode图标/符号列表。

 
  
                                  U+2605 ★黑色星形 U+2606 ☆白色星形   U+2609 ☉ SUN                                         U+2640 ♀女性符号  U+2642 ♂雄性符号                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             
 

选项 2: 纯CSS符号

最近我发表了一篇关于如何只用 CSS ( 不需要图像) 高效创建符号的文章。

如何简单地更改:

  • 旋转
  • 厚度

>>> 单击演示 <<<


enter image description here


CSS ( 使用 跨浏览器 支持高效)

 
  
chevron{位置:相对;显示:块;高度:50px ;/*height应为双 border*/%7D 雪佛龙:之前, after{: 位置:绝对;显示:块;内容:"";border:25px 实心透明;/*adjust size*/%7D /*Change以下四个'顶端'值旋转 (top/right/bottom/left)*/雪佛龙:before{顶部:0 ;border-top-color: #b00 ;/*chevron Color*/%7D 雪佛龙:after{顶部:-10px ;/*adjust thickness*/border-top-color: #fff ;/*match背景 colour*/%7D   
 
 
  
<class="人字形"> </i>   
 

选项 3: CSS BASE64图像图标

UP/DOWN向上/向下

DOWN 向下

UP英镑

只使用几行 css,我们可以将图像编码成 base64.


>>> 单击演示 <<<


优点

  • 不需要以图像的形式包含额外的资源。
  • 支持完整的alpha transparancy 。
  • 完全 跨浏览器 支持。
  • 小图像/图标可以存储到数据库中。

缺点

  • 更新/编辑可能会成为麻烦。
  • 由于生成的代码标记过多,不适用于大图像。

CSS

 
  
排序, sorting_asc, sorting_desc{ padding:4px 21像素 4像素 4像素;cursor:pointer ; %7D sorting{ background:url(data:image/gif;base64,R0lGODlhCwALAJEAAAAAAP///xUVFf///yH5BAEAAAMALAAAAAALAAsAAAIUnC2nKLnT4or00PvyrQwrPzUZshQAOw==) no-repeat中心; %7D sorting_asc{ background:url(data:image/gif;base64,R0lGODlhCwALAJEAAAAAAP///xUVFf///yH5BAEAAAMALAAAAAALAAsAAAIRnC2nKLnT4or00Puy3rx7VQAAOw==) no-repeat中心; %7D sorting_desc{ background:url(data:image/gif;base64,R0lGODlhCwALAJEAAAAAAP///xUVFf///yH5BAEAAAMALAAAAAALAAsAAAIPnI+py+0/hJzz0IruwjsVADs=) no-repeat中心; %7D   
 

因为你正在使用这些箭头切换 switch 要考虑创建这些箭头与html元素使用以下样式而不unicode字符。


.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/

这些如何?

&#x2C4&#x2C5 分别。

"非 ASCII ↑/↓"需要认证。

虽然这些字符不能在美国标准信息交换编码中定义为美国信息交换标准码 24 为标志符号,它的码是常用于给予的图形演示和 25 ( 十六进制 18和 19,取消和 EM:End的媒体) 。 原 pc, 代码页 437 ( 被IBM称为扩展 ASCII,包括数字代码 128到 255 ) 这些字形的使用定义为ASCII码和普及的这些约定渗透到行业中能被他们的部署成看到标准通过领先的大公司,如惠普,尤其对于打印机,与 IBM,特别是微型计算机后才能启动

就像美国信息交换标准码的编码使用处理可以和全身是相对过时当时,调查过程探讨它的作为标志符号,因此具有随时间而做的使用代码作为输入内容中字形已经过时由当前使用的约定。


只是媒体传输控制协议要包括glyphs,处需要强调的是,不仅它的扩展到由IBM在扩展美国信息交换标准码美国信息交换标准码做了,包括一个更大的数字为数字代码设置 128到 255,而且可以扩展的使用中的某些数值控制码,ASCII范围 0到 32,. 通常假设,前 0到 128不是"扩展",并且IBM正在使用传统的ASCII符号。 这里错误也在以前的引用中进行。 这里错误变得如此普遍,以致于它重新定义了 ASCII subliminally 。

我知道我迟到了,但是你可以用普通的CSS来完成这个任务:

HTML:

( 与 display:block; 或者它可以是任何HTML元素,如果你使用了一个内嵌元素像 <span> 例如务必使它的成为块/inline-block元素):

<div class="up"></div>

<div class="down"></div>

CSS:


.up {
 height:0;
 width:0;
 border-top:100px solid black;
 border-left:100px solid transparent;
 transform:rotate(-45deg); 
 }

.down {
 height:0;
 width:0;
 border-bottom:100px solid black;
 border-right:100px solid transparent;
 transform:rotate(-45deg); 
 }

你也可以使用 :before:after pseudo-elements实现它,这实际上是一种更好的方法,因为你避免了创建额外的标记。 但这取决于你如何完成它。

- -

在 CodePen possibilities, 与许多箭头这里是一个在试玩

于空三角形,相关 HTML实体


▽ = &#9661;
△ = &#9651;

显示down-pointing三角形有几种正确的方法。

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

html :

 
&#9660;

 

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

html :

 
&#x25BC;

 

方法 3: 直接使用字符

html :

  

方法 4: 使用 CSS

html :


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

css:


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


这三种方法中的每一个都应该具有相同的输出。 对于其他符号,存在相同的三个选项。 有些甚至有第四个选项,允许你使用基于字符串的引用( 例如。

统一码,哪些规范中它们所对应with,你可以使用参照网站像 Unicode-table.com 来发现哪些图标是被支持 例如你在 http://unicode-table.com/en/25BC/ 中查找down-pointing三角形的值。

注意,这些方法只适用于在每个浏览器中默认使用的图标。 虽然可以为其他UNICODE符号提供 跨浏览器 支持,但过程稍微复杂一点。

关于如何做this,如果你想知道如何添加支持 LESS 常见的Unicode字符,请参见 创建webfont关于Unicode增补多语言平面符号 有关 info.


背景图像

一个完全不同的策略是使用background-images而不是字体。 为了获得最佳性能,最好通过base-encoding将图像嵌入到你的CSS文件中,如下面的例子所示。 @weasel5i2 和 @Obsidian. 我建议使用SVG而不是 GIF,但是这对于性能和符号的清晰度都是更好的。

下面的代码是用于 enter image description here icon:


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

什么时候使用background-images或者字体

对于许多用例,SVG-based背景图像和 icon 字体在性能和灵活性方面相当等价。 要决定选择哪个,请考虑以下差异:

磅SVG图像

  • 它们可以有多种颜色
  • 他们可以嵌入自己的CSS和/或者由HTML文档样式
  • 它们可以作为单独的文件加载,嵌入CSS中嵌入 HTML
  • 每个符号都用XML代码或者base64代码表示。 不能直接在代码编辑器中使用字符或者使用HTML实体
  • 同一个符号的多次使用意味着当XML代码嵌入到HTML中时符号的重复。 在CSS中嵌入文件或者将文件作为单独文件加载时不需要复制
  • 不能使用 colorfont-sizeline-heightbackground-color 或者其他字体相关的样式规则来更改 icon的显示,但可以将 icon的不同组件分别引用为形状。
  • 你需要一些关于SVG和/或者base64编码的知识
  • IE 旧版本的限制或者不支持

磅 icon 字体

  • icon 只能有一种填充颜色,一种背景色,等等。
  • icon 可以嵌入到CSS或者HTML中。 在HTML中,你可以直接使用字符,或者使用一个HTML实体来表示它。
  • 某些符号可以在不使用webfont的情况下显示。 大多数符号不能。
  • 同一个符号的多次使用意味着当你的字符嵌入到HTML中时,符号的重复。 在CSS中嵌入文件时不需要复制。
  • 可以使用 colorfont-sizeline-heightbackground-color 或者其他字体相关样式规则来更改 icon的显示
  • 你无需特殊的技术知识
  • 支持所有主流浏览器,包括旧版本的IE

就个人而言,我建议只在需要多种颜色时使用 background-images,而这些颜色不能通过 colorbackground-color 和其他 color-related CSS规则来实现。

使用SVG图像的主要好处是你可以给符号的不同组件提供自己的样式。 如果你将 SVG XML代码嵌入到HTML文档中,这与样式化HTML非常相似。 然而,这将导致一个使用HTML标记和SVG标记的网页,这可以显著降低网页的可读性。 如果符号在多个页面上重复,并且你需要考虑 IE的旧版本没有或者有限的对SVG的支持,那么它也会增加额外的膨胀。

...