How Do I Change The Arrow Icon Inside The Select Tag With A Fontawesome Icon. I Am Using Vue-cli. I Have Imported Fontawesome In Main.js

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

Solution 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 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: .5em2.25em .5em1em;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.select:after {
  position: absolute;
  top: 25%;
  right: .5em;
  font-family: "Font Awesome 5 free";
  content: "\f358"
}

<linkhref="https://use.fontawesome.com/releases/v5.8.1/css/all.css"integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"crossorigin="anonymous"><divclass="select"><selectaria-label="Select menu example"><optionselected>Open this select menu</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="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.