2

I have struggling to set a font-awesome icon in the select drop-down menu in vuejs. I have tried some ways like

<option selected value="fa fa-github"><i class="fab fa-github"> 
</i>Github</option>

But it didn't work. please help me to solve this issue.

GuruVenkatesh R
  • 37
  • 2
  • 8
  • This is not related to node.js or vue.js. This is a css, html and js question, for you need to use a library or use cutom stylings and js for that. – sr9yar May 24 '18 at 07:33
  • Possible duplicate of [font awesome icon in select option](https://stackoverflow.com/questions/36743041/font-awesome-icon-in-select-option) – Harshal Yeole May 24 '18 at 07:36

1 Answers1

4

You can't put an <i> tag inside an <select> you can use the unicode directly inside the select and set the font with css.

HTML:

<select>
  <option selected value="fa fa-github">Github &#xf09b;</option>
</select>

CSS:

select {
  font-family: 'Font Awesome\ 5 Brands' , 'arial'
}

Example on this jsfiddle(font awesome 5): https://jsfiddle.net/68avuypL/

Joost K
  • 1,096
  • 8
  • 23
  • Thanks, dude it works, one more question Is there any possibility to load my local image rather than using Font Awesome icon?? – GuruVenkatesh R May 24 '18 at 09:24
  • Not easily and probably requires some js but there is a question already about that on stackoverflow : https://stackoverflow.com/questions/2965971/how-to-add-a-images-in-select-list – Joost K May 24 '18 at 11:05