I'm using Bootstrap 3's Glyphicon,
Some icons such as glyphicon-fire, glyphicon-calendar is displayed as "📅" in Firefox but it's working fine in Chrome.
I'm very sure the fonts and css's location is right,
I've tried every package of bootstrap from http://getbootstrap.com/ and github, but none of them worked.
Please tell me how can I fix this issue, thanks.
P.S: it's getting weird, the icon-calendar is displayed when I press ctrl-f5, but when I f5 it's displayed as "📅" again.
In Bootstrap 2.3 glyphicons were an image, but in V3, they're made into an icon font.
I can only think of one problem, and it's the charset.
Make sure you have <meta charset="utf-8"> in your page.
If that's not enough, assuming you're using Apache2 as your webserver, create a .htaccess file in your site directory containing this
AddDefaultCharset utf-8
Hope this helps!
The only workaround that I know of is to make images of what you wan't though there might be other simpler ways of doing it.
If you are on a mac then you can open it in chrome and take a small screenshot of it before editing it so that it looks good
If you are on a windows machine then you will need to make a big screenshot or zoom in and make a screenshot from up close
Related
After updating to antd 3.10 I'v noticed many of my icons are now misaligned:
Not sure why this is happening, I'v disabled all css besides antd.css but it's happening, even on a blank page (not necessarily in a modal).
Thing is I cannot reproduce this in a codepen with the same version, i've inspected everything in the browser inspector to check all the styles being applied and everything seems the same, and I am all out of troubleshooting idea.
Any ideas as to what could have caused this?
Update:
I rolled back to antd 3.0.0 and everything is fine. It definitely something has to do with the new svg icons. I still cannot replicate this outside of my environment. I am very much still interested in a solution to this.
This issue has nothing to do with webpack config - you need to add <!DOCTYPE html> at the top of your page. This is also why you can't reproduce it in codepen - doctype is specified even inside sandbox frame there.
Days of Internet research and worsening frustration lead me here. I cannot figure this out. Perhaps a wiser person can help.
Using web developer tools, every site page displays fine in every tested browser. However, when I check on an actual iPad and iPhone, no page displays correctly. What's wrong is that none of the CSS in style.css is executing on the iPad / iPhone.
I am using bootstrap, which it sees, but it does not see my style sheet (css/style.css). I have tested too many things to list, including absolute versus relative URLs, and rearranging the link tags in the header.
I tested inline and head-embedded styles and both work. But this is unacceptable to me.
I removed all code from the footer, leaving one div with a class from the external stylesheet, and that did not work. The iPad is blind to it.
I cannot debug the iPad from the iPad (I know Safari has instructions for this), but I have other bootstrap sites I coded that work fine and comparing them I cannot see what I am doing differently now.
I re-booted my iPad many times in case it was a cache issue.
I left out code in this question because I do not know what code to show. I can provide code or URLs or anything else if that helps. The pages are published.
I appreciate any assistance. Thank you.
I'm using Font Awesome. Sometimes - and I haven't figured out the pattern yet, unfortunately - the icons aren't working in Safari. When this happens, Safari shows the standard icon for a missing character, the outline of a box.
When I reset the browser, Font Awesome works as expected. And then, after some time, it reverts to not working again.
I'm serving Font Awesome from Nginx. That could be relevant, because I originally served these files without the proper headers, which broke Font Awesome in Safari. I'm wondering if maybe somehow Safari could have cached the non-header versions of the files, and maybe somehow keeps using them even when cache is cleared (maybe it's caching fonts somewhere else? But why would it revert to the broken version?).
Okay, this isn't much to go on I know, but any ideas, has anyone else experienced this? Thank you! :)
Edited to add screenshot of broken behavior:
Me and my colleague have been trying to solve this problem for awhile and we can not get it to work. Hopefully someone out there is smarter than us and have some good input on this.
When using IE8, IE9 or IE10 to visit websites http://glyphicons.com/ or http://getbootstrap.com/components/ not all the glyphicons are showing (some are showing but others just show as boxes []).
In Chrome all are showing.
EDIT: I should add that this is on computers on our company network. Could there be a setting here that prevents us for show all glyphicons?
EDIT2: I now have suspicions that our Group Policy disables XMLHTTP for all users on network. Therefore, is it possible to encode the halfling font and use it directly in the CSS?
I have found the solution. It was quite simple. Unfortunately I won't be able to use Glyphicons.
IE have a setting to restrict font download. This is enabled by group policy and cannot be changed on standard workstations. I have been able to recreate the same behavior on my own laptop by restricting font download.
Se this article for further explanation:
http://msdn.microsoft.com/en-us/library/ms533034(v=vs.85).aspx
To answer your comment olahell, if you count icons you will get 470 icons although it's write 420 with IE8. It's maybe an old forgotten image only shown on old IE version.
It looks like the Glyphicons site does some browser sniffing to come up with the 470 / 420 icon figure. The most likely reason for that is that 50 icons dont work in IE; and that is probably due to IE having no SVG support.
So this one has had my scratching my head for over an hour now. I am designing a Wordpress theme for a client of mine. I originally decided to customize the Toolbox theme, which I did for a week or so. I spent so much time rewriting their theme, I figured it would be better if I just wrote it from scratch. So I did that. I copied over all of the font files that I had and started to work on my header. Now for some reason the spacing is messed up. Originally it looks like:
Which I think is pretty readable. I have the font-size set at 70px on that image. So I copied the SAME exact css properties over to my new file on my new theme. Then I copied the same exact code within my header. When I saved and refreshed my browser, the font was there, but the spaces between the words were really small, and the font was much larger.
Here is was it looked like when I was done:
Looking at it, I think the words are way too close together. It worked fine before and I can't find what would have caused the change. They both have the bootstrap css file attached and the same custom CSS file. I tried adding the original toolbox CSS file to see if it was something in there that caused the change but nothing.
I would really appreciate the help. I've never had this problem before. I'm using Chrome, but the same thing happens in Safari as well. The font I'm using is Bebas Neue from font squirrel
Thank you! If I left any information out, just ask :)