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

Question

I am using vue-cli. I am pretty new to vue. I am trying to change the arrow symbol in the right corner of the select tag. How can I do it? I tried searching for a solution and got that I need to use css. But how can we use font-awesome in css?

Answer 1

A good point of reference for styling form fields is wtfForms.com

There's many ways of doing this. But if you're using Font Awesome across your whole site and need access to multiple icons in your CSS, you can import the CSS stylesheet. Info here: 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">

Then you can set a pseduo element's font-family to the Font Awesome font, and use an icon's unicode in the content of that pseudo element. If you browse the icons on the Font Awesome website, each icon has a unicode listed toward the top of the page.

Info on using Font Awesome in pseudo elements

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

For your use case, referencing the way wtfForms does it, you have to wrap the select input in another element. You apply your styling (and pseudo icon) to that element, while hiding the original select input.

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

But read through what wtfForms has to say. There are some caveats and accessibility concerns with this, which they outline on their site.