Fontello Glyph Font Odd Behaviour on Firefox, Shows Unicode Codes Instead of Icons

Fontello Glyph Font odd behaviour on Firefox, shows unicode codes instead of icons

I've managed to solve this strange issue. Turned out it was an Apache problem, got the solution from: http://www.fontsquirrel.com/blog/2010/11/troubleshooting-font-face-problems

I've added to my .htaccess the following lines:

If you are serving from Apache, you can add this to your .htaccess file to allow your site access to the fonts:

<FilesMatch "\.(ttf|otf|woff)$">
<IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

and the font now is ok.

How to add images in select list?

In Firefox you can just add background image to option:

<select>
  <option style="background-image:url(male.png);">male</option>
  <option style="background-image:url(female.png);">female</option>
  <option style="background-image:url(others.png);">others</option>
</select> 

Better yet, you can separate HTML and CSS like that

HTML

<select id="gender">
  <option>male</option>
  <option>female</option>
  <option>others</option>
</select>  

CSS

select#gender option[value="male"]   { background-image:url(male.png);   }
select#gender option[value="female"] { background-image:url(female.png); }
select#gender option[value="others"] { background-image:url(others.png); }

In other browsers the only way of doing that would be using some JS widget library, like for example jQuery UI, e.g. using Selectable.

From jQuery UI 1.11, Selectmenu widget is available, which is very close to what you want.

Changing the symbols shown in a HTML password field

You can't change the password masking character in the standard password field. You can fake it with a textbox, but it makes for a weak security model because you don't get the protection you do from the password textbox. As a side note, it's generally not a good idea to change the behaviour of items like this because users have become used to one form of masking, and you will be introducing a different one - if there's no good reason to do this, I'd avoid it.

---

Related Topics