SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    California
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

    Thanks!

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    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.

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    California
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by mattSanchez View Post
    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.
    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:
    Code 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.

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    California
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •