My Wingdings aren't working

I found a diagonal arrow in the symbol typeface “Wingdings 3” that I’d like to use but I can’t get it to work. The typeface is installed on my system (osx 10.8) and I even tried to embed it using @font-face. The letter that corresponds to the arrow is “k”, but the only thing that renders in the browser is the actual letter, k, and not the arrow. Does anyone know why this isn’t working? I was also unable to use other symbol typefaces, like Zapf Dingbats.


[font=verdana]Some browsers do this – they will only display alphanumeric fonts and not symbol fonts. I guess it’s a feature designed to help users by not allowing a mistake or unknown font name to result in an illegible display.

While sometimes it would be nice to use symbol fonts, they’re actually a really bad idea from an accessibility point of view. Anyone who doesn’t have that font installed or available – eg Linux users, mobile phone users, text-to-speech or Braille users – will be completely unaware that it’s supposed to be a symbol and will just get ‘k’. The correct solution is to create an image of the symbol (which should be less than 1KB, so no big deal) and then either insert it with an <img> tag (with suitable alt text) or as a background image, whichever is more appropriate to the situation.[/font]

The reason I wanted to use a symbol font is because I’m using it as part of a link and I want to change the color on :hover. Using an image would not allow me this flexibility.

[font=verdana]If you use a background-image then you can do that.

Otherwise, you can use a bit of trickery!
Create an image where the background is white (or whatever the background colour of your page is) and the symbol itself is transparent. Insert the image using a standard <img> tag, and the use something like this in your CSS:

a:link img, a:visited img {background-color:red;}
a:hover img, a:focus img, a:active img {background-color:blue;}

to make it look like the symbol is changing colour.[/font]

Cool trick! I think I might try that eventually. For now, I’ll just use the escape character “→”. I’m not sure how widely it’s supported across browsers, though.