✖ is too small in FireFox

Question

Firefox renders special character too small. I compared in Chrome and Firefox. You can check - http://jsfiddle.net/y23rwucp/

How can I do same size in all browsers using px:

font-size: 14px;

Thank you

Screenshot

P.S. I'm testing on Mac.

@showdev, same size in every browser. Google chrome and Firefox. Look the screenshot please — Woohoo, Oct 13 '14 at 18:27
That's not how it look in my Firefox. IE and Chrome shows it smaller than Firefox. Dingbats just isn't very predictable. — Guffa, Oct 13 '14 at 18:29
[This might be informative](http://stackoverflow.com/questions/4633443/unicode-special-characters-appear-differently-in-firefox-vs-chrome-ie). — showdev, Oct 13 '14 at 18:39

Martijn · Accepted Answer · 2014-10-13T18:51:43.217

As the comments suggest, using dingbats (or any font not designed for this perpose) for this is not optimal. A proper replacement would be ×:

span{
    font-size: 14px;
    font-weight: bold;
}
<span>&times;</span>

You could also make a class and use the before. You can use this as simply
<span class="Times"></span> or put text in the span (required a tad more css)

.Times:before { 
    content:"\00d7";
    font-weight: bold;
}

This might be worthy to add: Font Awesome does the same thing I just did with the :before, only they have a lot of icons. If you need various icons in your site, you might want to check this out.

✖ is too small in FireFox

1 Answers1