2

Im converting an old project to Vue.js, and Im having trouble rendering a select list that contains Font Awesome icons inside it.

My code was...

<select id='fa_select'>
  <option value='fa fa-address-book'>&#xf2b9; fa-address-book</option>
  <option value='fa fa-address-book-o'>&#xf2ba; fa-address-book-o</option>
  etc etc etc 
</select>

Which works fine in the old project using bootstrap and Jquery.

But when I put this list into Vue.js however, it doesnt work. I have vue-bootstrap installed, and have fa-icons working. For instance, I can do 

<i class='fa fa-phone'></i>

And it displays just fine, so I know the stylesheet for Font Awesome icons is importing and working properly.

So then, why won't they display in the list??

I also tried v-html as well, just incase I needed to wrap it as html, that also didnt work either. 

<option value='fa fa-address-book' v-html="'&#xf2b9; fa-address-book'"></option>

Any ideas?

Kylie
  • 11,421
  • 11
  • 47
  • 78
  • Possible duplicate of [Why does my Vue component require :key?](https://stackoverflow.com/questions/48931387/why-does-my-vue-component-require-key) – Bhojendra Rauniyar Mar 20 '18 at 11:32
  • I dont see how that question answers this one? Im not looping and just want to display unicode characters. – Kylie Mar 20 '18 at 12:07
  • There's an answer to know that's a bug in font-awesome. – Bhojendra Rauniyar Mar 20 '18 at 12:13
  • Are you using FontAwesome’s JavaScript or its CSS? – poke Mar 20 '18 at 13:24
  • Installed it with npm install, then Im importing it @import '~font-awesome/css/font-awesome.min.css'; Works fine otherwise. I can use the icons everywhere. Unless I use unicode, like as shown above. So I think this is more of a unicode/vue js thing – Kylie Mar 20 '18 at 15:14

1 Answers1

0

Its my bad. I was missing a piece of styling code that I forgot to bring over.

#fa_select {
   font-family: 'FontAwesome', 'sans-serif';
}
Kylie
  • 11,421
  • 11
  • 47
  • 78