Как мне изменить значок стрелки внутри тега выбора с потрясающим значком. Я использую Vue-Cli. Я импортировал fontawesome в main.js - PullRequest
Новая
       16

Как мне изменить значок стрелки внутри тега выбора с потрясающим значком. Я использую Vue-Cli. Я импортировал fontawesome в main.js

3 голосов
/ 14 апреля 2019

Я использую vue-cli. Я довольно новичок в VUE. Я пытаюсь изменить символ стрелки в правом углу тега выбора. Как мне это сделать? Я попытался найти решение и получил, что мне нужно использовать CSS. Но как мы можем использовать font-awesome в css?

1 Ответ

3 голосов
/ 14 апреля 2019

Хороший ориентир для полей формы: 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 этого псевдоэлемента. Если вы просматриваете значки на веб-сайте Font Awesome, у каждого значка есть юникод, указанный в верхней части страницы.

Информация об использовании Font Awesome в псевдоэлементах 

.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. С этим связаны некоторые оговорки и проблемы доступности, которые они изложили на своем сайте.

...