36

I was using the Wingdings font in the CSS for some symbols like a pencil and a home icon.

It worked on IE, Chrome and Safari but not in Firefox and Opera. I googled it but did not find any better solution.

Why doesn't it work in Firefox? I do need to use those icons, is there any way to use Wingdings in Firefox?

Wladimir Palant
  • 56,865
  • 12
  • 98
  • 126
niko
  • 9,285
  • 27
  • 84
  • 131

6 Answers6

42

Mozilla and Opera are standard-compiliant. Wingdings is not standard (what a surprise coming from Microsoft) because not mapped to Unicode, and so should never be used on a website.

However, do not despair, most symbols are available in Unicode : check http://www.alanwood.net/demos/wingdings.html

Important addendum (october 2014) : As of Unicode v7, released on June 16, 2014, all characters from Webdings and Wingdings have been added to Unicode. See the comment below.

mddw
  • 5,570
  • 1
  • 30
  • 32
  • As of Unicode v7, all characters from Webdings and Wingdings have been added to Unicode ([\[1\]](http://en.wikipedia.org/wiki/Webdings), [\[2\]](http://en.wikipedia.org/wiki/Wingdings)). – GSerg Oct 03 '14 at 16:22
  • 1
    I don't understand what Alan wood's page is talking about, and I can't find anything on the w3c site that talks about "standard" fonts. wingdings seems to validate OK using the w3c css validator. Obviously if someone is using a device which doesn't have a specific font installed, the browser will substitute a different font, but that's not what the OP is talking about. – Andy Oct 23 '15 at 07:26
  • Is there a tool to convert Windings to standard Unicode characters? – Ky - Dec 14 '15 at 12:20
  • 1
    @Andy By "non-standard" they actually mean "not standard-compliant". As in the font does not comply with the Unicode standard. For instance, the byte `0x74` in UTF-8 should display a capital letter `J`. But wingdings instead displays a smiley face. Why is this a problem? Because fonts are supposed to degrade gracefully in cases where the user does not have the target font installed. If a font doesn't comply with the standard, it doesn't degrade gracefully. Anyone who doesn't have Wingdings (a Microsoft font) installed on their machine will just see garbage text instead. – daiscog Dec 01 '16 at 15:32
  • Even if correct, this does not answer the OP’s question: Why is it not displayed in Firefox? – Michael Piefel Jul 28 '21 at 07:32
14

You could use unicode characters such as

✎

http://www.fileformat.info/info/unicode/char/270e/index.htm

Community
  • 1
  • 1
Joseph Marikle
  • 76,418
  • 17
  • 112
  • 129
  • 1
    Note: Make sure to use a [supported font](http://www.fileformat.info/info/unicode/char/270e/fontsupport.htm). This doesn't work in 95% of the fonts installed on my machine. – Wesley Murch Oct 22 '11 at 21:16
  • Correction: According to the site's local font tester it's not supported much, but Firebugging those fonts inline to this page seemed to work - in fact I can't get it *not* to work, so that's a mystery to me. – Wesley Murch Oct 22 '11 at 21:24
  • Wesley: per CSS font-matching rules unknown glyphs in the currently selected font cause the grapheme to be rendered using a different font. – gsnedders Oct 23 '11 at 12:55
  • @gsnedders: That's great to hear, can you point me to a reference for that by any chance? – Wesley Murch Oct 25 '11 at 04:34
  • @gsnedders: Thanks a lot! Even more reason to specify a generic font family like `serif`. – Wesley Murch Oct 25 '11 at 19:43
  • Set the `font-size` to something larger than the font you'd use in combination with CSS `::after` or `::before` and `content` though do not do this universally for every Unicode character as they vary greatly in rendered size. – John Sep 09 '15 at 12:19
6

The Wingdings characters can be accessed in a Unicode-compliant manner, via the "Private Use Area" (codepoints U+E000 to U+F7FF). These character codes are reserved for any font-specific symbols not part of the regular Unicode character set, and indeed Wingdingds maps all of its symbols to the subrange U+F021 to U+F0FF.

For instance, the triangular flag, which is mapped to P = 0x50 in legacy encoding, can be accessed via U+F050 = =  (HTML) = \F050 (CSS).

I'm not sure about other browsers, but it does work in Firefox 12.

VKen
  • 4,964
  • 4
  • 31
  • 43
Christoph Lipka
  • 61
  • 1
  • 1
  • 1
    This is technically correct and helps to understand the nature of the problem, but according to the Unicode standard, Private Use characters should not be used in information interchange except by private agreements. In this case, if the font actually used is different from the one declared in CSS, a generic symbol of undisplayable character is shown (or sometimes whatever character some other font happens to have assigned to the same code postion). – Jukka K. Korpela Dec 04 '12 at 08:39
2

To quote a website:

There was an endless debate between the people that said Mozilla should support the symbol font in its default configuration because that is a valuable ability and standards lawyers who said no, because they believe that support violates the HTML standard. So far, the obstructionists have prevailed.

http://hutchinson.belmont.ma.us/tth/Wfonts.html

orangething
  • 708
  • 5
  • 16
0
@font-face {
  font-family: "Your typeface";
  src: url("type/filename.eot");
  src: local("☺"),
    url("type/filename.woff") format("woff"),
    url("type/filename.otf") format("opentype"),
    url("type/filename.svg#filename") format("svg");
  }

more here http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/

simple solution in your HTML

<style type="text/css">
@font-face {
    font-family: "Ace Crikey";
    src: url(ace.ttf);
}
.ace {
    font-family: "Ace Crikey";
    font-size: 230%;
}
</style>
Grumpy
  • 2,140
  • 1
  • 25
  • 38
0

You can use Gimp or other graphic-software and make some GIFs of the needed icons from the Wingdings font.

Eddy Freddy
  • 1,820
  • 1
  • 13
  • 18