如何使用fontawesome图标更改select标记内的箭头图标.我正在使用Vue-Cli.我已经在main.js中导入了fontawesome [英] 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

问题描述

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

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?

推荐答案

wtfForms是样式表单字段的一个很好的参考.com

有很多方法可以做到这一点.但是，如果您在整个网站上都使用Font Awesome，并且需要访问CSS中的多个图标，则可以导入CSS样式表.此处的信息: https://fontawesome.com/start

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"完整性="sha384-50oBUHEmvpQ + 1lW4y57PTFmhCaXp0ML5d60M1M7uH2 + nqUivzIebhndOJK28anvcrossorigin ="anonymous">

然后，您可以将pseduo元素的 font-family 设置为Font Awesome字体，并在该伪元素的 content 中使用图标的unicode.如果您在Font Awesome网站上浏览图标，则每个图标的Unicode编码都会列在页面顶部.

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.

有关使用Awesome字体的信息在伪元素中

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

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

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>

但是请仔细阅读wtfForms的内容.他们在网站上概述了一些注意事项和可访问性问题.

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

这篇关于如何使用fontawesome图标更改select标记内的箭头图标.我正在使用Vue-Cli.我已经在main.js中导入了fontawesome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！