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 that I need to use css. But how can we use font-awesome in css?

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

来源：https://stackoverflow.com/questions/55674519/how-do-i-change-the-arrow-icon-inside-the-select-tag-with-a-fontawesome-icon-i

标签

javascript

css

fonts

vuejs2

font-awesome