如何使用fontawesome图标更改select标签内的箭头图标。 我正在使用Vue-Cli。 我在main.js中导入了fontawesome

Question

我正在使用vue-cli。 我很陌生。 我正在尝试更改选择标记右角的箭头符号。 我该怎么做？ 我尝试寻找解决方案，并得到我需要使用CSS。 但是我们怎样才能在css中使用font-awesome？

Answer 1

样式表单字段的一个很好的参考点是wtfForms.com

有很多方法可以做到这一点。 但是，如果您在整个站点中使用Font Awesome并需要访问CSS中的多个图标，则可以导入CSS样式表。 信息： https ： //fontawesome.com/start

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

然后，您可以将pseduo元素的font-family设置为Font Awesome字体，并在该伪元素的content中使用图标的unicode。 如果您浏览Font Awesome网站上的图标，则每个图标都会在页面顶部列出一个unicode。

有关在伪元素中使用Font Awesome的信息

.example::before {
  font-family: "Font Awesome 5 Free";
  content: "\f007";
}

对于您的用例，引用wtfForms的方式，您必须将select输入包装在另一个元素中。 您将样式（和伪图标）应用于该元素，同时隐藏原始选择输入。

 .select { position: relative; display: inline-block; color: #555; } .select select { padding: .5em 2.25em .5em 1em; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .select:after { position: absolute; top: 25%; right: .5em; font-family: "Font Awesome 5 free"; content: "\\f358" } 

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> <div class="select"> <select aria-label="Select menu example"> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </div> 

但请阅读wtfForms所说的内容。 这有一些警告和可访问性问题，他们在他们的网站上列出。