Font-awesome: Empty Squares on iOS
I’m not getting any icons to display in Mobile Safari, iOS 6.1.3 — not iPhone nor iPad.
I’m not doing anything out of the ordinary here, so I can’t diagnose it, and haven’t found a fix.
Tried LESS and CSS, minified and not, files. No problems in Chrome and Safari.
jasonhibbs
All 32 comments
Accidentally closed.
jasonhibbs
on 19 May 2013
So this works just fine in other desktop browsers? Have you had it previously working? And by getting it working, do you mean in an iOS app or in the iOS browser?
davegandy
on 19 May 2013
Yes works fine in desktop browsers. Mobile Safari shows those empty squares. Last version I was using was 3.0.2, just went back to that, no problems.
http://fontawesome.io is fine. Not sure what I’m doing wrong…
jasonhibbs
on 19 May 2013
Same on iOS simulator. Really weird, because again, http://fontawesome.io is fine.
jasonhibbs
on 20 May 2013
How do you serve the font? I personally serve the SVG and TTF gzipped. Unless specifying the types in my .htaccess, they show as squares in iOS and Android.
abennouna
on 20 May 2013
I guess as is, as opposed to gzipped. I can’t do anything with the .htaccess on my hosting anyway.
As I said, 3.0.2 no problems, and I’m not doing anything differently here.
jasonhibbs
on 20 May 2013
Okay, using 3.1.1 fonts, but 3.0.2 LESS, no problem on iOS, except that the new icons aren’t referenced and thus don’t appear. Interestingly, trying to use a new icon does not display an empty square; nothing appears. (Maybe that’s not very interesting, and expected behaviour…)
jasonhibbs
on 20 May 2013
Adding the new icon codes to the 3.0.2 LESS allows me to use the new icons.
jasonhibbs
on 20 May 2013
Yes, every icon requires associated CSS. Closing, as it sounds like the issue is resolved.
davegandy
on 20 May 2013
Well, resolved for me, by merging two versions. But 3.1.1 as is doesn’t work (in my case)… I will have to figure why it’s broken for me.
jasonhibbs
on 20 May 2013
I have having the same issue. We are writing a Ruby Web App. Using the latest version of Font Awesome (3.2.1), the icons aren't rendering on iOS. They are rendering on desktop browsers as well as we are able to use other web fonts (@font-face method), on iOS. Not seeing any errors in the web inspector for iOS or in desktop Chrome and Safari. We are able to get other websites to work with Font Awesome on iOS, but not through Ruby on iOS. Tried implementing older versions of Font Awesome for this instance with no luck.
robertegnacheski
on 9 Sep 2013
I think my problem may have been that I did something wrong, and that the only reason I could see the new font on desktop is that it was installed on my machine, thus nothing appeared on separate devices.
jasonhibbs
on 24 Oct 2013
Im having the same problem on ipad , can please someone here with an ipad see and confirm that no icons are displayed, not fontawesome , no other font icons whatsoever ?
http://movidagrafica.com/mage ,
this is the css im using
@font-face {
font-family: 'iconos';
src: url('font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
url('font/fontawesome-webfont.ttf') format('truetype'),
url('font/fontawesome-webfont.svg#fontawesomeregular'
) format("svg");
}
chaosavatar
on 22 Sep 2014
@font-face {
font-family: 'iconos';
src: url('font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
url('font/fontawesome-webfont.ttf') format('truetype'),
url('font/fontawesome-webfont.svg#fontawesomeregular'
) format("svg");
}
iconos?
Sorry but I can't confirm this one and this sounds like a support request, please consider using stackoverflow. FA works on iPad
tagliala
on 22 Sep 2014
Changing the font-family name shouldn’t be a problem, as long as you also changed FontAwesome in .fa:
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
…
}
I would check your paths are correct though, too.
jasonhibbs
on 22 Sep 2014
paths are correct
font declarations are correct
iconos means icons in spanish , any problem with that ?
any thought abbout FA not working in the ipadpreview.com ?
chaosavatar
on 22 Sep 2014
iconos means icons in spanish , any problem with that ?
yes, you should be aware with your edits to fontawesome's css. As @jasonhibbs said, you should also edit .fa class. But we can't provide support for this, sorry.
any thought abbout FA not working in the ipadpreview.com ?
This website doesn't work for me.
E.g: http://ipadpreview.com/previewer?url=https%3A%2F%2Fwww.google.com%2Ffonts
tagliala
on 22 Sep 2014
Viewed your site (http://movidagrafica.com/mage) in iPhone iOS8, FontAwesome appeared correctly.
The iPadPreview.com preview also displayed FA correctly.
jasonhibbs
on 22 Sep 2014
Hey, i think problem is the Charset encoding.
My problem was solved when i remove the @charset 'UTF-8' on the top of my css file.
leaofelipe
on 13 Nov 2014
Not sure if it helps, but notice that the folder where the fonts are taken from has changed from font to fonts (referenced from font-awesome.css). I had things set up with v3.2.1 on my web server, and when updating to v4 just overwrote the files in the font folder, without actually renaming the folder to fonts.
dpagano
on 26 Nov 2014
On iOS, it seems to occur especially in "Private" browsing mode.
adrian7
on 23 Feb 2015
Any fixes/workarounds for this? I'm getting a lot of complaints from my iphone users about blank icon boxes after implementing font-awesome for our mobile navigation.
inspire22
on 24 Apr 2015
On much reflection, I suspect my issue was due to the font path being incorrect. With the font installed on my desktop it appeared to work correctly, but without the font installed on my mobile no characters were found in the default font.
jasonhibbs
on 27 Apr 2015
I've continued to face this issue over the last several months. Had been simply linking the publically-CDN-hosted CSS file to implement. I still consistently encountered this issue when first loading my page in iOS. Tried self-hosting the CSS and fonts to see if would make a difference. No luck.
Further googling seemed to indicate that iOS, while compatible with a number of font formats, seems to prefer SVGs. I removed the reference to the SVG font in the CSS, and that seems to consistently work now.
Suspect this is a bug in the way iOS Safari handles SVG fonts, but I can't prove it.
da-vid
on 19 Sep 2015
I also have this problem with iOS Safari. Sometimes (usually the first load or so) I get squares, but after a while the icons show up. This doesn't seem to happen with Glyphicon so it's hard to blame iOS for it...
I have problems both with hosted and CDN files.
cosme-benito
on 28 Oct 2015
I'm currently having this issue as well. I've tried the CDN, self hosting and the sass Gem. They all show are squares on iOS Safari. Sometimes they show after a while, often not.
anquinn
on 9 Nov 2015
An obvious tip, but triple check the relative paths to font awesome. In my case, somehow it was magically working on the desktop, but not on IOS. It turned out to just be a relative path problem. Once fixed, all was well across all platforms.
N1bbler
on 4 Jan 2016
This will be solve the problem;
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family:'FontAwesome';
src: url('fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
}
}
gokmenkurtoglu
on 4 Mar 2016
@gokmenkurtoglu You're a God ! It works ! Thank's you so much
DrFitch
on 18 Apr 2016
I had this problem but it was because I had an adblocker setup on the device and configured it to block web fonts. I'm leaving this comment here so others won't spend 30 mins puzzling over this like I did before checking that. ¯_(ツ)_/¯
eoinkelly
on 6 Jul 2016
I couldn't find a solution for this problem. So i broke down my css, bits by bits.
The "solution" I found was removing external fonts - like Google fonts - and all referring css declarations from my project.
Another thing I've found was setting a background-image to the body or html in css is causing problems with FontAwesome on iPad. After removing the background-image the problem seems to be gone.
Sounds weird, I know, but it worked for me. Maybe this can help anybody out there.
hutilicious
on 13 Dec 2016
I actually have Google Fonts on my project as well, that might be causing
it...
On Tue, Dec 13, 2016 at 12:14 PM Carsten notifications@github.com wrote:
I couldn't find a solution for this problem. So i broke down my css, bits
by bits.
The "solution" I found was removing Google Fonts from my project, and
remove font declarations on selectboxes. Sounds weird, I know. This might
help anyone searching for a solution, check your font declarations.—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/FortAwesome/Font-Awesome/issues/1119#issuecomment-266723635,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AJQIjT4-NCEkl5Xnr_J_DTyNOb2uXwVbks5rHowogaJpZM4Aqmm2
.
cosme-benito
on 13 Dec 2016
Related issues
sezeresen
·
3Comments
douglasdeodato
·
3Comments
petermolnar
·
3Comments
brystfire08
·
3Comments
desspro
·
3Comments
Most helpful comment
This will be solve the problem;
@media screen and (-webkit-min-device-pixel-ratio:0) { @font-face { font-family:'FontAwesome'; src: url('fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg'); } }