如何在下拉选择框中设置Font Awesome图标？

Question

如何在下拉选择框中设置Font Awesome图标？

htmlcssdrop-down-menufont-awesomedropdown

3

我想在下拉选择框中设置Font Awesome图标，并更改背景颜色... 我尝试了这段代码，但它不起作用...

这是我的CSS代码：

select {
  border-radius: 30px;
  padding: 0px 70px 1px 20px;
  margin-top: 50px;
  margin-left: 45px;
  font-size: 18px;
  border: 2px solid orange;
  box-shadow: 10px 3px 8px #888888;
  appearance: none;
  position: relative;
}
select i {
  position: absolute;
  float: right;
  background-color: orange;
  bottom: 0px;
  pointer-events: none;
}

这是我的 HTML 代码：

<div class="row">
      <p class="search">Search by Location</p>
      <select class="dropdown">
           <option>Canada</option>
      </select>
      <i class="fas fa-angle-down"></i>
</div>

- devanshi

1

你把FontAwesome的CSS放在<head>标签里了吗？ - Felipe Moreira

1

将CSS放在选择器之前，否则它会先加载选择器，然后再加载CSS，这样就无法正常工作。 - Felipe Moreira

1

提醒一下，带有嵌套<option>元素的<select>元素默认已经包含了向下的箭头。 - Tanner Dolby

1

请检查这个答案，希望对您有用 https://dev59.com/5loV5IYBdhLWcg3wEbS-#53664264 - Muhammad Fazeel

“i”不会被样式化，因为你的CSS是在select元素内部样式化“i”元素，但在你的HTML中，“i”元素在“select”元素之后。如果要直接样式化“select”元素后面的“i”元素，则应使用“select + i”。 - Daemon Beast

显示剩余12条评论

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Willy Richardson · Answer 1

为他的代码和 FontAwesome 解决方案

.row select {    
    display: inline-block;
    appearance: none;
    margin-right: -24px;
    padding-right: 36px;
}
.row i {
    pointer-events: none;
    font-size: 1rem;
}

对我有用。

- Krishan Kumar · Answer 2

编辑后的答案

select.input-lg {
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  /* no standardized syntax available, no ie-friendly solution available */
}

select + i.fa {
  float: right;
  margin-top: -30px;
  margin-right: 5px;
  /* this is so when you click on the chevron, your click actually goes on the dropdown menu */
  pointer-events: none;
  /* everything after this is just to cover up the original arrow */
  /* (for browsers that don't support the syntax used above) */
  background-color: #fff;
  padding-right: 5px;
}

来源：我想把选择图标/下拉图标改为 (fa-chevron-down)，怎么做？

你也可以参考这个链接：在选择选项中使用字体awesome图标