Problem with icon awesome in a select option

Asked

Viewed 93 times

0

I’m trying to add an awesome Unicode icon to an option from my select but it always gets me this symbol

@font-face {
font-family: "FontAwesome";
font-weight: normal;
font-style : normal;
src : url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0");
src : url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"),
url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"),
url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"),
url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"),
url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg");
}
<select id="select_pt" class="select_pt" size="5" style="font-family:'FontAwesome';">
    <option value="alemanha">ALEMANHA</option>
    <option value="austria">ÁUSTRIA</option>
    <option value="belgica">BÉLGICA</option>
    <option value="bulgaria">BULGÁRIA</option>
    <option value="chipre">CHIPRE</option>
    <option value="croacia">CROÁCIA</option>
    <option value="dinamarca">DINAMARCA</option>
    <option value="eslovaquia">ESLOVÁQUIA</option>
    <option value="eslovenia">ESLOVÉNIA</option>
    <option value="espanha">ESPANHA</option>
    <option value="estonia">ESTÓNIA</option>
    <option value="finlandia">FINLÂNDIA</option>
    <option value="franca">FRANÇA</option>
    <option value="grecia">GRÉCIA</option>
    <option value="holanda">HOLANDA</option>
    <option value="hungria">HUNGRIA</option>
    <option value="irlanda">IRLANDA</option>
    <option value="italia">ITÁLIA</option>
    <option value="letonia">LETÓNIA</option>
    <option value="lituania">LITUÂNIA</option>
    <option value="luxemburgo">LUXEMBURGO</option>
    <option value="malta">MALTA</option>
    <option value="polonia">POLÓNIA</option>
    <option selected value="portugal">PORTUGAL &#xf00c;</option>
    <option value="reino_unido">REINO UNIDO</option>
    <option value="republica_checa">REPULICA CHECA</option>
    <option value="romenia">ROMÉNIA</option>
    <option value="suecia">SUECIA</option>
</select>

  • Caesar here the icon appears perfectly without the slightest problem, I edited your question for executable code, see what appears to you.

  • You want the symbol on all options, or just when you click on one of them?

No answers

Browser other questions tagged

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