I am having an issue with Font awesome icons and it's iE support.
It is working perfectly fine on all other browsers.
But for some reason on iE or Edge, the icon doesn't appear, There is a space of where it would go, yet there is no icon.
I noticed a difference in the styling when looking at the Dev tools in Chrome vs iE (iE10 to Edge).
The Internet options has download fonts enabled.
I have added the meta tag to the top of my <head> tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
I included the entire font awesome zip (even though i dont need less or scss folders)
I am using Font-awesome v4.6.3
and Bootstrap v3.3.7
please see image below to see differences in developer tools:
iE-DeveloperTools:
Chrome-DeveloperTools:
Other than that, I don't see any differences between the two.
Seems like it may be a Browserstack issue. I was using Broswerstack to test on different browsers and it seems to be having an issue with local Font awesome files, yet works with CDN.
I checked the path multiple times and it works on all browsers i am able to test on through my Mac. Guess im buying a PC too.
See comments above for details.
Related
I'm trying to implement the theme-color meta tag but I can't see it working in my Motorola smartphone with Chrome and Android Lollipop.
I started with a theme-color tag then I wrote the other tags, but have had no success at all.
<meta name="theme-color" content="#5f5eaa">
<meta name="msapplication-TileColor" content="#5f5eaa">
<meta name="msapplication-navbutton-color" content="#5f5eaa">
<meta name="apple-mobile-web-app-status-bar-style" content="#5f5eaa">
This webpage is running over HTTPS with an invalid certificate (it's an intranet tool), but I don't think it would affect that feature, right?
In my case, it actually turned out to be the theme my phone was using. The theme-color meta tag does not work in Android's dark theme (I'm on Android 10 at the time I'm writing this). Switch to the light theme in Chrome and you'll see it work. :)
A valid certification is required from my testing experience.
I had the same problem as I was testing on my localhost (i.e. the address bar background color did not change on mobile), but as soon I pushed to production (i.e. production has valid certification) I was able to view the changes reflected on the android testing devices.
Android devices used: OnePlus 3T, Huawei, an old samsung phone. All were positive results.
Always check actual browsers versions.
Here is table of supporting this meta tag.
https://caniuse.com/#feat=meta-theme-color
Please check your browser theme? May be there enabled the dark mode!
chrome requires you to have a valid certificate for the theme-bar color to work
Just tested this, following #Lodmot's answer for Android 11. There is a slight (but important mention) to make:
Do NOT rely on the "System default" setting! In Battery Saver mode, the theme is forced to "Dark", so your theme-color will have no effect.
To properly test out your code, manually set Chrome's theme to "Light".
I have checked my reference also...
suggest me one answer how to compatibility the glyph icons in firefox and IE also.
When i am using small images in the place of glyphicons, it is working properly.
Have you considered using some other plugin? Font Awesome should work for you, and I'm sure it does work in Firefox and IE (I'm using it in one project now)
I am using two Google Web Fonts at my website. They are Roboto Slab and Fauna One. They look good in latest Mozilla Firefox and IE10 but for some reason they look horrible in Google Chrome.
They are linked to my website as follows:
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Fauna+One' rel='stylesheet' type='text/css'>
It took me a while to realize that Google Chrome has a problem with web fonts and that it renders them poorly. I am wondering if there is solution for this?
What if I download those two font types and embed them into the main directory of my website and then call them through CSS via #font-face property? Would Google Chrome in that case render those fonts nicely or I would still have the same problem and poorly rendered fonts???
Or there is some other solution for this issue?
Thank you all!
I believe I saw some bug report for Chrome where it was mentioned that this will be fixed - but I'm not 100% sure. I believe that it's not actually 100% the fault of Chrome...
My understanding is that the problem is to do with the order in which font types are presented in the #font-face directive. So, Chrome handles more than one type but not all types will render at equal quality. Apparently, Google actually doesn't serve the fonts in the right order from fonts.google.com - somehow...
In the end I found that, with Roboto at least (which I'm also using on a project), it is available for use on Font Squirrel (and open sourced under the Apache 2.0 license) - so you can download it here: http://www.fontsquirrel.com/fonts/roboto (download the Webfont Kit for full cross-browser font support) - you lose the CDN goodness of having it hosted on Google's servers if you use it from your own web server but, IMHO, I'd rather lose a few milliseconds than have to deal with such terribly rendered text...
I can't help you with Fauna One, unfortunately - it doesn't appear to be listed on Font Squirrel - perhaps you can find it on another font site? Or another similar font which is available on font squirrel?
From a web browser perspective (Chrome being the browser in question), Chrome 35 in Windows has difficulty rendering some fonts, like Roboto, without some horrible artifacts that make the font difficult to read.
There is a feature called DirectWrite that will be included by default in future versions of Chrome that will fix this problem. You can enable it now in Chrome 35 by going to chrome://flags in your browser URL bar. You can Enable DirectWrite (experimental in Chrome 35), close your browser, open and try again.
Just to be clear, I discovered this problem on Chrome 35 for Windows. DirectWrite is a DirectX API for rendering fonts in Windows. Chrome by default uses Windows Graphics Device Interface (GDI) which seems to be the problem.
See this article
I have a website. It uses 2 Google webfonts for its headings and body text. These work fine on Chrome/IE/Safari (including mobile) but when I view the site on my office computer running IE9 on Win7 the Google fonts do not load and fall back to a sans-serif.
Here is what I see:
IE9:
Chrome:
I cannot figure out why IE fails to load the font as I am aware that Google font's are compatible with IE7+. I figure it might be a security setting but can't get to the bottom of it. Any ideas.
I don't know if this is the issue, but try changing your request to only one link tag:
<link href='http://fonts.googleapis.com/css?family=Oswald|Lato' rel='stylesheet' type='text/css'>
Perhaps loading two fonts in two different requests causes issues.
On my IE9 it looked the same as in Chrome. Press F12 and make sure you are using proper Browser and Document Mode.
I have a gwt application with various layoutpanels. My layout works fine with all browsers except IE9. The layout is completely broken. Text appears everywhere, images at the bottom of the page or just shown for a 3/4, etc. I have recompiled my app with the newest version of gwt 2.3 but it didn't change anything. Any suggestions? Thanks in advance. Here an image with the broken background:
It is very strange that in IE9 something is broken and NOT in the other browsers.
Try this:
-correct the issues for IE9 and your other target browsers
-then see if in the other browsers you continue seeing everything ok (probably you will have problems with IE6 and IE7 so then what I would do is to fix them with a hack)
So what I recommend is to beging working with the highest version of the browsers and THEN fix the older ones. Do the inverse way...=)
If this doesnt help you, could you attach us some code?
A workaround to your problem might be to add the "X-UA-Compatible" meta tag to your HTML to tell IE to render in a different mode. For example, to tell IE9 to always render in IE8 mode:
<meta http-equiv="X-UA-Compatible" content="IE=8" />
There are many useful articles regarding this meta tag