如何使用 CSS 显示向下箭头符号答案

【问题标题】：How to show an arrow down symbol with CSS如何使用 CSS 显示向下箭头符号
【发布时间】：2014-07-05 13:35:54
【问题描述】：

我看到了一些风格不错的下拉框，比如这个，我想创建一个自己的下拉框：

创建箭头的 CSS 非常简单。它只是将一个 unicode 字符作为箭头作为内容添加到元素的 :before 类中；

.select:before{
    content: "\f0d7";
}

我自己试过了，但没有显示字符，因为该字符不包含在像 Arial 这样的默认语言中：

http://jsfiddle.net/3cW9M/

我当然可以包含一个包含这个字符的字体，但我认为为了错误而在页面上再添加大约 100kb 的开销很大。

有没有其他好的解决方案来存档这种箭头样式而无需额外的字体或图像？

【问题讨论】：

见：*.com/questions/2701192/…
您可以使用 CSS 三角形，也可以使用其中之一：jsfiddle.net/tUuSB .. 仅箭头不需要库。

标签： css unicode fonts

【解决方案1】：

对于那个箭头，您估计的 100kb 有点偏离。您可以仅使用应用程序所需的符号编译字体，例如使用http://icomoon.io/。我可以直接估计箭头会生成大约 1kB 的字体。

如果您考虑到您想要包含在页面中的所有小细节，例如社交插件图标、导航花絮、用户图标、操作图标等，那么您指定的在其中包含自定义字体的方法假设您只包含您需要的字形，您的页面非常值得！

【讨论】：

我不知道我可以用我需要的字符来编译一个字体。我会试试的。

【解决方案2】：

请改用\25bc。

如果你想改变颜色，只需添加 css color 属性。

.select:before{
    content: "\25bc";
    color: gray;
}

【讨论】：

我使用了 "\25bc" ，我得到了箭头图标。请告诉我在哪里可以找到文档以了解更多信息？

【解决方案3】：

所有 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);
}

http://jsfiddle.net/2sU2x/2/

【讨论】：

+1 我认为纯 CSS 是最好的选择。您也可以使用transparent 而不是rgba(0,0,0,0)。这适用于不支持 rgba CSS3 属性的旧浏览器。（即border-right: 5px solid transparent;）
是的，你可以两者都做，这样它会在浏览器中优雅地降级。

【解决方案4】：

您可以使用其他unicode 或使用边框： DEMO

.select:before{
    content: "\25be  or  \25bc  ?  ";
    float:right;
    color:gray;
}
.select:after{
    content: "";
    margin:0 0.5em;
    display:inline-block;
    border: 7px solid transparent;
    border-top:8px solid gray;
    border-bottom:0 none;
}

【讨论】：

【解决方案5】：

如果你想使用 FontAwesome：

将此信息添加到<head> </head> 部分：

  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

然后这个 CSS：

.select:after {
  content: "\f0da";
  float: right;
  border: none;
  font-family: 'FontAwesome';
}

插入符号 = "\f0d7"
插入符号 = "\f0d8"
插入符号左 = "\f0d9"
插入符号右 = "\f0da"

【讨论】：