Font Awesome icon in select option

by

You can simply add a FontAwesome icon to your select dropdown as text. You only need a few things in CSS only, the FontAwesome CSS and the unicode. For example :

select {
  font-family: 'FontAwesome', 'Second Font name'
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<select>
  <option>Hi, &#xf042;</option>
  <option>Hi, &#xf043;</option>
  <option>Hi, &#xf044;</option>
  <option>Hi, &#xf045;</option>
  <option>Hi, &#xf046;</option>
</select>

Working fiddle

The Unicode can be found when you click on an icon: Fontawesome

According to the comment below and issue on Github, the Unicode in select elements won’t work on OSX (yet).

Update: from the Github issue, adding multiple attribute to select element makes it work on:

OSX El Capitan 10.11.4

  • Chrome version 50.0.2661.75 (64-bit)
  • Safari version 9.1
  • Firefox version 45.0.2
select{
  font-family: FontAwesome, sans-serif;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<select multiple>
  <option>&#xf26e 500px</option>
  <option>&#xf042 Adjust</option>
  <option>&#xf170 Adn</option>
  <option>&#xf037 Align-center</option>
  <option>&#xf039 Align-justify</option>
  <option>&#xf036 Align-left</option>
  <option>&#xf038 Align-right</option>
</select>

JSFiddle

More Related Contents:

  1. Center and bottom-align flex items
  2. How to center the contents of an HTML table?
  3. How to hide Table Row Overflow?
  4. How to change the inner white color of Font Awesome’s exclamation triangle icon?
  5. 100vh height when address bar is shown – Chrome Mobile
  6. Fixed footer in Bootstrap
  7. min-height does not work with body
  8. How to make div appear in front of another?
  9. CSS On hover show another element
  10. How do I avoid a page break immediately after a heading
  11. Can flexbox detect when a flex item wraps?
  12. CSS replacement for
  13. What’s the point of valid CSS/HTML?
  14. How do I get placeholder text in firefox and other browsers that don’t support the html5 tag option?
  15. What is the best way to replace the file browse button in html?
  16. CSS making two divs equal height with display table
  17. CSS triangle containing text
  18. Why does display: inline-block; remove an underline from a child element?
  19. What is the box-sizing property for in CSS?
  20. CSS margin pushing the body element
  21. Vertical scroll rendering issue in Flexbox in Firefox [duplicate]
  22. Sticky footer with flexbox
  23. Why are horizontal scroll bars shown on my website?
  24. White space under image [duplicate]
  25. Flexbox layout with two equal height children, one containing nested flexbox with scrolling content
  26. Is it bad design to use table tags when displaying forms in html?
  27. Making a flex item float right
  28. Wrap a text within only two lines inside div
  29. Can I specify maxlength in css?
  30. Make floating divs the same height

Leave a Comment