I am using :before{ content: "\1F4C4"; } to insert Entypo webfont icons before my links. The icons aren't loading on mobile webkit. Instead, a diamond with a ? inside shows in their place.
Oddly enough, I don't have this problem in any desktop browser, including webkit. Also, the same icons loaded via <a >📞</a> show just fine in mobile webkit.
This has to do with a bug in Webkit. I noticed that it only affects unicode with more then 4 characters. See the following answer for further details:
https://stackoverflow.com/a/10641785/2114896
Related
The render of a FontAwesome icon works perfect on Firefox. But when I wanna change it through the inspector (Firebug), it doesn't show the unicode (for example: f066). So where I should have:
content:"\f066;
It shows:
content: "";
It is not showing the data correctly. If I overwrite a new one (\f077) it prints nothing. Is it possible to fix it? What I need is to be able to change FontAwesome icons from the inspector, like on Chrome.
For some reason, two icons that show in IE and Chrome do not appear in Firefox and instead gives me some weird icon. I am using a font to display these.
I used firebug to track down exact CSS code for this but it simply shows
.icon-signin:before{
content: "";
}
whereas in IE, it shows
and in Chrome it shows:
I honestly don't understand what's happening here.
In the actual CSS file it has the following line:
.icon-signin:before{content:"\e047";}
All I could gather from google search is that
:before
is outdated and that I should use
::before
Would this fix the solution?
But if that is the case, why is Chrome displaying the icon when it also reads the css code with :before, not ::before ?
I'm using some google web fonts for dynamically rendered svg logos. The fonts I'm using don't have italic versions and I'm actually pretty happy with the way Chrome fakes it when I put font-style="italic". The only problem is that firefox doesn't seem to fake it at all. This fiddle shows it: http://jsfiddle.net/a6C32/3/
Is there a set way of recreating that Chrome functionality across all browsers?
Just to clarify what I'm seeing:
Chrome (36.0.1985.125 OSX):
Firefox (31.0 OSX):
UPDATE: so after playing around with it some more, it turns out Firefox will do faux italics unless the text element also has a stroke defined on it: http://jsfiddle.net/a6C32/4/
Definitely a bug in Mozilla. My quick fix with SVG magic:-
font-style="normal" transform="translate(10,0) skewX(-20)"
Please see the above image. I'm using the icon font 'FontAwesome' on my website. In the website header, I'm using them for navigation icons. Each of these icons are links, that have the 'fa' and 'fa-2x' classes attached.
I'm not overruling any default font sizes or rendering modes for FontAwesome, so this is a clean state. All screenshots are from Windows 8.1, testing several browsers. Here are my findings:
Firefox: perfect rendering, optimal balance between legibility and anti-aliasing
Chrome: font rendering too thick and harsh, hurting legibility
Safari: reasonable legibility, yet a bit too thin and harsh
IE10: Very close to FF, acceptable as-is
Opera: Same as Safari
Mu ultimate goal would be to have ideal rendering across browsers, as per the Firefox example. A perhaps more realistic goal is to beat Chrome into submission, as it presents the biggest issue.
Font-Awesome by default has this applied:
-webkit-font-smoothing: antialiased;
I've tried setting this to the other text rendering modes, yet none seem to make a meaningful difference, the same is true for setting the text-stroke property, even at 0 the 'thickness' problem remains. That problem is best seen from the 'members' icon.
You can see the rendering live at www.jungledragon.com
Any clues/tips on how to improve rendering quality and consistency?
That's old issue I can see, but I had similar problem with FontAwesome and discovered that weight of these icons can be different depending on font-weight attribute (that's a font, after all).
So, my problem was that narrow holes in icons becomeing invisible in my app and the solution was setting the font-weight attribute to normal in CSS.
For my liking, icons in Chrome version of your issue are just "overweighted" that way.
Can you guys point out what I am doing wrong on with the navigation on this site? It works fine on webkit, but not firefox!
http://datatables.dyndns-web.com/
vs intended
The NAV-tag isn't a block-element by default in current versions of Presto, Trident and Gecko. Only WebKit has a default stylesheet for HTML5-elements included already. You should use a basic-/reset-CSS to format all HTML5-elements.
See: http://html5doctor.com/html-5-reset-stylesheet/
BTW, if someones asking for an image, you should upload an image of the desired result, not one of the broken view…