CSS форматирование в HTML выбор параметров с помощью fontawwesome - PullRequest
Новая
       0

CSS форматирование в HTML выбор параметров с помощью fontawwesome

0 голосов
/ 17 января 2020

У меня есть стандартный список выбора болота в HTML, который я пытаюсь использовать в качестве списка.

Текущий код выглядит так: 

    <select size="20" style="font-family: Arial, FontAwesome; width: 200px;">
        <option value="1">&#xf00d; icon-master</option>
        <option value="2">&#xf2b9; address-book</option>
        <option value="3">&#xf042; adjust</option>
        <option value="4"> air-freshener</option>
        <option value="5">&#xf015; icon-home</option>
        <option value="6">&#xf018; icon-road</option>
    </select>

Это работает, но я есть один или два вопроса.

Вот как это выглядит на экране:

View of HTML above

Я говорю один или два, как это возможно быть таким же Глядя на изображение напротив icon-master и адресной книги, они имеют разную ширину. Можно ли отформатировать это так, чтобы все текстовые строки были выровнены?

Наконец, нет изображения для освежителя воздуха, может ли это быть отформатировано таким же образом?

1 Ответ

0 голосов
/ 17 января 2020

Я бы использовал значки в качестве псевдоэлементов, загружая их, используя их Unicode, например " f2b9 ", и задавал им ширину. Таким образом, у них будет пробел, даже без иконки. 

option:before {
  content: "";
  width: 20px;
  display: inline-block;
  font-family: FontAwesome;
  text-align: center;
}

option.cross:before {
  content: "\f00d";
}

option.default:before {
  content: "\f2b9";
}
<script src="https://use.fontawesome.com/53b22dcfd4.js"></script>

<select size="20" style="width: 200px;">
    <option value="1" class="cross">icon-master</option>
    <option value="2" class="default">address-book</option>
    <option value="3" class="default">adjust</option>
    <option value="4">air-freshener</option>
</select>

Пример JSFiddle

...