如何使用CSS显示一个向下的箭头符号

Question

我看到一些很好看的下拉框，比如这个，我想创建自己的:

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

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

我尝试了一下，但是字符没有显示出来，因为该字符不包含在默认语言(如Arial)中：

http://jsfiddle.net/3cW9M/

当然，我可以添加一个包含该字符的字体，但我认为为了解决这个错误，添加另外约100kb的页面开销太大了。

是否有其他好的解决方案可以实现此箭头样式而无需额外添加字体或图像？

- jan

---

see: https://dev59.com/m3E85IYBdhLWcg3wmEpV - Ozoid

你可以使用CSS三角形或者这些之一：http://jsfiddle.net/tUuSB/ .. 对于一个简单的箭头来说，不需要使用库。 - Josh Crozier

Answer 1

您可以使用其他Unicode字符或者使用边框： 演示

.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;
}

- G-Cyrillus

Answer 2

请使用\25bc代替。

如果您想更改颜色，只需添加css颜色属性即可。

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

- droymanz

---

我使用了"\25bc"，得到了箭头图标。请告诉我在哪里可以找到更多关于此的文档资料？ - divine

Answer 3

如果您想使用FontAwesome：

请将以下信息添加到部分：

  <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';
}

caret-down表示向下的箭头，对应的编码是"\f0d7"
caret-up表示向上的箭头，对应的编码是"\f0d8"
caret-left表示向左的箭头，对应的编码是"\f0d9"
caret-right表示向右的箭头，对应的编码是"\f0da"

- Conway Phelps

Answer 4

所有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/

- KnightHawk

---

+1 我认为纯CSS是最好的选择。你也可以使用 transparent 替代 rgba(0,0,0,0)。这样可以在不支持 rgba CSS3 属性的旧浏览器中正常工作。（例如：border-right: 5px solid transparent;） - War10ck

是的，您可以这样做，以便在各种浏览器中都能够优雅地降级。 - KnightHawk

Answer 5

你对那个箭头的100kb的估计有点偏差。你可以从你的应用程序中只使用需要的符号编译字体，例如http://icomoon.io/。我可以大致估计那个箭头会生成约1kB的字体。

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

- user3646269

---

我不知道我可以只编译带有我需要的字符的字体。我会尝试一下。 - jan