Question

我正在使用vue-cli。我对Vue很陌生。我正在尝试更改选择标签右上角的箭头符号。我该怎么做？我试图寻找解决方案，但我需要使用CSS。但是，我们如何在CSS中使用font-awesome？

Answer 1

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

有很多方法可以做到这一点。但是，如果您在整个网站上都使用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编码都会列在页面顶部。

Info on using Font Awesome in pseudo elements

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

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

1 个答案: