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

Question

我正在使用 vue-cli。我对 vue 很陌生。我正在尝试更改选择标签右上角的箭头符号。我该怎么做？我尝试寻找解决方案，发现我需要使用 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">

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

Info on using Font Awesome in pseudo elements

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

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

.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 的内容。对此有一些注意事项和可访问性问题，他们在其网站上概述了这一点。