Font Awesome in select box

Asked

Viewed 692 times

0

I’m having trouble displaying some 'icones' from Fontawesome as in the example, note that an icon is displayed however the second not, and when I click the select box the first option also does not display the icon correctly. How can I correct such errors?

select {
      -webkit-appearance: none;
      -moz-appearance: none;
      -o-appearance: none;
      -ms-appearance: none;
      appearance: none;
      font-family: "Font Awesome 5 Free", "Roboto";
      font-weight: 900;
      font-size: 15px;
      color: #727272;
      border: none;
      margin-right: 10px; }
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

<div class="lang">
  <select>
    <option value="1">Português &#xf078;</option>
    <option value="2">English</option>
  </select>

  <select>
    <option value="1">BRL &#xf17b;</option>
    <option value="2">USD</option>
  </select>
</div>

html5 css3

1 answer

-2

You must place the icon in a proper tag so that it is displayed correctly.

<select>
    <option value="1">BRL <i class="fa fa-arrow-down"></i></option>
    <option value="2">USD</option>
  </select>

  • Could you explain how you did for the tag <i> function within a select?

  • Just add it inside any <option>. The <i> tag serves to identify an icon.

  • Sorry, I guess I was unclear. The question is why one icon works the other not using Unicode directly.

  • Because the correct method of use is through the <i> tag, and by Unicode, html will not recognize directly the Unicode of the awesome font, because the same is proper.

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.