I am not able to view icon in options of select in HTML

Question

I am not able to view font awosom icon in options. It will display when I select it but not displayed in options.

I have implement code as: HTML

<select id="dropdownview" class="rounded ps-3 pe-2">
    <option value="classic" id="classic">&#xf03a; &nbsp; &nbsp;Classic</option>
    <option value="compact" id="compact">&#xf0c9; &nbsp; &nbsp;Compact</option>
    <option value="table" id="Table1">&#xf0ce; &nbsp; &nbsp;Table</option>
</select>

CSS

@font-face {
    font-family: "FontAwesome";
    font-weight: 600;
    font-style : normal;
    src : url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot");
    src : url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot") format("embedded-opentype"),
         url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2") format("woff2"),
         url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff") format("woff"),
         url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf") format("truetype"),
         url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.svg") format("svg");
}
#dropdownview {
    font-family: FontAwesome;
}

go to this link there is similar way to do it. https://stackoverflow.com/a/36743356 — Jason0011, Dec 31 '22 at 09:33
It is not work in my case. I have tried all solution given in above link. — usha febar, Dec 31 '22 at 12:44
https://codepen.io/guenon/pen/poZbzRV this is code pen code I copied as it is and as per you required its working properly. check it out — Jason0011, Dec 31 '22 at 16:38

I am not able to view icon in options of select in HTML

I have implement code as: HTML

CSS

0 Answers0