Geek Answers Handbook

IE: dropdown options are empty if they contain the nature of my custom font

On my site, I need to display <select> only inside the icon. To do this, I created a custom font, such as font awesome , in which each character is one of my icons.

Then in my CSS I posted this:

 @font-face { font-family: 'myIcon'; src:url('../fonts/myIcon.eot?eengex'); src:url('../fonts/myIcon.eot?#iefixeengex') format('embedded-opentype'), url('../fonts/myIcon.ttf?eengex') format('truetype'), url('../fonts/myIcon.woff?eengex') format('woff'), url('../fonts/myIcon.svg?eengex#myIcon') format('svg'); font-weight: normal; font-style: normal; } .select-with-icon { font-family: 'myIcon'; }

And in my HTML, I populated my <select> options containing a unicode representation of the characters:

 <select class="select-with-icon"> <option value="myValue1">&#xe606;</option> <option value="myValue2">&#xe607;</option> <option value="myValue3">&#xe608;</option> ... </select>

Now everything works fine with Chrome and Firefox, but unexpectedly , I have some problems with IE.

Good with Chrome:

chrome

Completely empty with IE10 and IE9:

enter image description here

Last points:

  • In IE, if I click on one of the empty options, the list will disappear and the selected icon will display correctly inside my <select> , so the problem only seems to be with <option> .
  • I cannot use custom javascript components, only native <select> .

EDIT:

I forgot to say in the original question, but works fine with IE11 .

Here's the codepen to try, I used bootstrap glyphics, and the problem is the same.

+6
source share
3 answers

Your font statement looks weird. Try removing ?eengex from your font-face ad:

 @font-face { font-family: 'myIcon'; src:url('../fonts/myIcon.eot'); src:url('../fonts/myIcon.eot?#iefix') format('embedded-opentype'), url('../fonts/myIcon.ttf') format('truetype'), url('../fonts/myIcon.woff') format('woff'), url('../fonts/myIcon.svg#myIcon') format('svg'); font-weight: normal; font-style: normal; }

The .eot font points to IE9 that you encountered. IE10 reads WOFF along with all other modern browsers.

Another option is to use the font-awesome as a backup, as it is well tested in older browsers.

0
source

Note: Internet Explorer 8 and earlier do not support the @ font-face rule with the WOFF format (EOT format only ). go and change it

0
source

I use a font that is different from my designs.

in the <head> I paste this (which I downloaded with a font and pasted into the css folder)

 <link rel="stylesheet" href="css/font-awesome.min.css">

than in the <body> , I use this:

  <p> Follow us on: </p> <ul> <li><a href="#"><i class="fa fa-facebook-official fa-2x"></i></a> </li> <li><a href="#"><i class="fa fa-twitter-square fa-2x"></i></a> </li> </ul>

you also need to create a font folder on your website when you post your awsome fonts.

it works for me.

0
source

More articles:


All Articles