如何使用 CSS 显示向下箭头符号
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23706460/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to show an arrow down symbol with CSS
提问by jan
I saw some nice styled dropdown boxes like this one and wanted to create my own one:
我看到了一些漂亮的样式下拉框，就像这样，我想创建自己的下拉框：
The CSS to create the arrow was quite simple. It just adds a unicode character as arrow as content to the :before class of an element;
创建箭头的 CSS 非常简单。它只是在元素的 :before 类中添加一个 unicode 字符作为箭头作为内容；
.select:before{
content: "\f0d7";
}
I tried it on my own, but the character is not shown, because the character is not contained in a default language like Arial:
我自己尝试过，但没有显示该字符，因为该字符不包含在像 Arial 这样的默认语言中：
I could of course include a font, that contains this character, but I think its to much overhead to add another ~100kb to the page just for the error.
我当然可以包含一个包含这个字符的字体，但我认为为了错误而向页面添加另一个 ~100kb 的开销很大。
Is there any other good solution to archive this arrow style without additional fonts or images?
有没有其他好的解决方案来存档这种箭头样式而无需额外的字体或图像？
回答by G-Cyrillus
回答by droymanz
Use \25bcinstead.
使用\25bc来代替。
And if you want to change the color just add css color property.
如果您想更改颜色，只需添加 css color 属性。
.select:before{
content: "bc";
color: gray;
}
回答by KnightHawk
All CSS method
所有 CSS 方法
.arrow-down {
height:0px;
width:0px;
border:none;
border-top:5px solid #000000;
border-left:5px solid rgba(0,0,0,0);
border-right:5px solid rgba(0,0,0,0);
}
回答by KnightHawk
Your estimate of 100kb is a bit off for that one arrow. You can compile fonts from just the symbols you need for your app, using for example http://icomoon.io/. I can, off hand, estimate that arrow would generate a font of about 1kB.
你对 100kb 的估计对于那个箭头有点偏离。您可以仅从应用程序所需的符号编译字体，例如使用http://icomoon.io/。我可以立即估计箭头会生成大约 1kB 的字体。
If you take into account all the little bits and pieces you want to include in your page, like say social plugin icons, navigation tidbits, user icons, action icons, et caetera, then the method you specify of including custom fonts in your page is pretty worth it, assuming you only include the glyphs you need!
如果您考虑要包含在页面中的所有点点滴滴，例如社交插件图标、导航花絮、用户图标、操作图标等，那么您指定的在页面中包含自定义字体的方法是非常值得，假设您只包含您需要的字形！
