我正在寻找一个HTML或ASCII字符,这是一个三角形指向向上或向下,以便我可以使用它作为拨动开关。
我找到了↑(↑)和↓(↓) -但它们的词干很窄。我只是寻找HTML箭头“头”。
我正在寻找一个HTML或ASCII字符,这是一个三角形指向向上或向下,以便我可以使用它作为拨动开关。
我找到了↑(↑)和↓(↓) -但它们的词干很窄。我只是寻找HTML箭头“头”。
当前回答
我知道我迟到了,但你也可以用普通的CSS来完成这个:
HTML:
(它可以是任何HTML元素,如果你正在使用一个内联元素,例如<span>,确保你使它成为一个block/内联块元素display:block;或显示:inline-block):
<div class=“up”></div>
and
<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伪元素来完成它,这实际上是一种更好的方法,因为您可以避免创建额外的标记。但这取决于你想如何完成它。
--
这是CodePen中的一个演示,有许多箭头的可能性。
其他回答
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/
我喜欢用的网站是codepoints。net
这里是“箭头”和“三角形”的搜索结果:https://codepoints.net/search?q=arrowhead+triangle
它有一些“三角形箭头”的匹配,但它只有4个小页面,可以略读,而且每个字符都有很多不错的匹配细节。
还有一个代码块的“杂项符号和箭头”,这个网站列出了他们在这里:https://codepoints.net/miscellaneous_symbols_and_arrows
我使用▼和▲,但它们可能不适合您。我使用alt 11551为第一个和11550为第二个。如果你的系统的ascii不一样,你总是可以复制粘贴它们。
Unicode箭头似乎已经过时了,因为截至2021年,安卓手机似乎还没有安装包含箭头的完整Unicode字体(只是大多数顶级语言字体,如中文、阿拉伯语等);而一个要求下载像样的Unicode字体的网页,比如Arial Unicode MS,下载时间就会达到22Meg。
FontAwesome对这类白痴很有用。版本4.7 font-awesome.min.css的大小为30KB。向上排序,向下排序,字形向上,字形向下提供你的字符。https://fontawesome.com/v4.7/get-started/工作在常规HTML(文本等)。然而,它需要重写,因此在字面跨度上下文中使用起来更加棘手。
jquery已经支持人们可以使用的图标,只需悄悄地下载一个6.8K的字体图像,然后从它的引子中取出大块。包括插入符号(v形)和三角形(箭头)。目录见https://api.jqueryui.com/theming/icons/。包含jquery后,使用代码<span class="ui-icon ui-icon- arrowthick厚-1-n"包含一个字形></span>。您要求的上下箭头是ui-icon-caret-1-n和ui-icon-caret-1-s(用于南北);在低分辨率下,插入符号比三角形看起来更尖。它们可以被着色。
不幸的是,jquery目前似乎只能以16x16像素的分辨率显示图标——这在今天的显示器上只是一粒沙子。它们可以用变换函数放大。但它开始变得潦草。
Jquery图标也可以通过本地覆盖自己的图像,通过background:url()。查看jquery文档。
字节大小图标https://github.com/danklammer/bytesize-icons还不错。
还有其他的。