Menu icon Foundation
Foundation Icons Not Showing Inside <option> tag

I don't know the expected behavior about this incident but, i cannot use icons in <option> tag. Here is the code.

<select>
  <option value=""><i class="fi-arrow-up"></i></option>
  <option value=""><i class="fi-arrow-right"></i></option>
  <option value=""><i class="fi-arrow-down"></i></option>
  <option value=""><i class="fi-arrow-left"></i></option>
</select>

<div>
  <i class="fi-arrow-up">
  <i class="fi-arrow-right">
  <i class="fi-arrow-down">
  <i class="fi-arrow-left">
</div>

Am I missing something? Doesn't they should act like a regular text inside that parent element? If it shouldn't work, can anybody share a link to the documentation that says which tags are not available to use with icons?

 

edit: I don't think it is an hard question. But with three days still nobody showing up for help. I am bit frustrated.

iconsFoundation Iconsicons not showingicons not workingoption tag

I don't know the expected behavior about this incident but, i cannot use icons in <option> tag. Here is the code.

<select>
  <option value=""><i class="fi-arrow-up"></i></option>
  <option value=""><i class="fi-arrow-right"></i></option>
  <option value=""><i class="fi-arrow-down"></i></option>
  <option value=""><i class="fi-arrow-left"></i></option>
</select>

<div>
  <i class="fi-arrow-up">
  <i class="fi-arrow-right">
  <i class="fi-arrow-down">
  <i class="fi-arrow-left">
</div>

Am I missing something? Doesn't they should act like a regular text inside that parent element? If it shouldn't work, can anybody share a link to the documentation that says which tags are not available to use with icons?

 

edit: I don't think it is an hard question. But with three days still nobody showing up for help. I am bit frustrated.