I have developed an application that uses bootstrap glyphicons and font-awesome. A major customer has tight security rules and the glyphicons are not displaying when using IE11.
The site is hosted in Azure. At the customer's site they work in Chrome. They also work in IE on a machine that runs it locally (with visual studio). I think it's an 'Internet' zone setting but I don't have permission to see it.
I host the css and font's in my application.
When I go to the font-awesome site (http://fontawesome.io/icons/) I cannot see the fonts.
When I go to the bootstrap site (http://getbootstrap.com/components/) I can see the glyphicons.
I changed my app to use the CSS from bootstrap (http://getbootstrap.com/dist/css/bootstrap.min.css). I can see that it downloads the css but I don't see the font.
When running locally, using the bootstrap hosted css, I see it successfully get's the font with this request.
http://getbootstrap.com/dist/fonts/glyphicons-halflings-regular.eot?
When hitting my hosted site it never seems to attempt to get the font. I don't see any errors.
Why can I not get the font in my application but it works on the bootstrap site?
Related
I have developed a small web App with MVC.
I have some CSS that does work OK when in debug in visual studio i.e. on IIS Express
It looks like as below (now I cannot insert images, thanks to stackoverflow)
When I deployed this application to my local machine, some CSS does not work.
This is how the deployed application appears. I explain, all the rounded corners are gone. and the location of some DIVs is not where it is desired.
it happens in IE, Chrome is largely OK.
when I check rendred css in developer tools for IE, all the "border-radius" elements appeared underlined. and position of the DIVs can be fixed by re-adjusting margins etc (which are good to go with Chrome).
btw IE Version is 11.0.9600.16428
Windows 7 professional, IIS Version 7.5.76
Any clues?
This can be several things. But I would check the following:
Check that all css files have been deployed and contains the styling as the source.
Check that the mark up is the same. Try opening the two sites in different tabs and check the source.
Check your developer tools for 404 on css/js files.
Check for javascripts errors.
Check if the correct doctype is set.
My website http://goesllc.com is using wordpress and the theme I have installed already included font awesome icons. I created a custom set and added them to my theme. They were all working fine, but the custom ones I added randomly stopped showing up in Chrome, IE, and Firefox.
The icons still show perfectly in Safari, Opera, and my mobile android browser.
If you go to the site in Chrome and look below the slider on the homepage you can see where there are supposed to be icons, but instead it just shows letters. There are 3 icons that are supposed to be on that page, but instead they show the letters, "a", "e", and "d". If i were to switch to the fontawesome icons the theme had pre-installed they show up fine.
However, in Safari or Opera the icons shows perfectly as intended. I've contacted my theme's author and have been searching around for a fix, but to no avail.
Anybody have any idea why the icons stopped showing up in certain browsers?
Thanks.
This is a common problem with serving up web fonts from other servers. In your case, the goes-font is being served up from http://goesassets.com which is a different domain, and is being blocked by a cross-origin policy.
Either move those fonts into a directory on the http://goesllc.com server and load them from there, or set up a CORS policy on http://goesassets.com to serve them up.
There are plenty of articles online to set up CORS policies via apache configuration files, .htaccess, etc if you go that route.
I have a problem using the Bootstrap 3.1.1 Glyphicons.
In Google Chrome, the Icons are working fine.
But in Firefox, some icons are displayed, some are not.
For example:
<span class="glyphicon glyphicon-log-in"></span>
Should display the "log-in" glyphicon.
In Chrome the Icon is displayed, in Firefox it is not.
<span class="glyphicon glyphicon-folder-open"></span>
Should display the "folder-open" glyphicon.
In Chrome the Icon is displayed, in Firefox it is displayed, too
Google told me, that Firefox might have a problem with importing the font files from a different server, but I have them located on my web server. Since some Icons are displayed in Firefox and some not, I don't think the Problem is within file access troubles.
The funny thing is, then I visit the Bootstrap Components Website, EVERY glyphicon (even the ones, my Firefox won't display on my website) are displayed correctly by Firefox.
Since the glyphicons on the Bootstrap Components Website work fine in Firefox, I compared the MD5sums of the files used on the Bootstrap Components Website and the Files I received via the bower download of Bootstrap. The checksums are equal, so I think I don't have corrupted files.
Any ideas?
UPDATE:
OS => OpenSuSe
But I found the problem:
After deleting the fonts from my server, they there somehow still displayed on the website.
Chrome Console and Firebug did not tell me where they come from, but a network sniffer showed me, that I somewhere include a CSS from a foreign server.
After a search over my project, I found this CSS import in a third party bootstrap add-on.
Deleted the line and now my local fonts are used, and all the icons are displayed correctly.
Sorry for bothering you, should have had the idea to check a network sniffer for possible includes called from third party extension earlier.
Running into an issue that has me pulling hair out!
I am buildling a site and started browser testing. The page displays properly (with the regular IE breaks) but for some reason, does not display the actual CSS in the IE8 dev tools. Site is locally hosted with MAMP and using VirtualBox to test with IE/PC.
I've added the IP to the hosts file in IE8.
I've fixed all validation errors
Even threw it up on a server to see if it was a local issue
Running HTML5 doctype so maybe thats the issue? But pulled it from HTML5 Boilerplate so I'm under the impression everything is good there?
Not really sure what the issue is and its driving me crazy.
Site is hosted here: www.enkshows-dev.com
p: enkshows-dev
w: enkshows-dev
Also - IE8 doesn't render the CSS file in the 'CSS' tab, but the page layout is correct.
Don't worry, folks. I figured it out.
Looks like IE8 gets hung up on the css link for the H&FJ cloud typography production fonts.
As soon as that's removed, all works swell.
I've been struggling for hours now, to figure out why font-awesome isn't functioning properly. I used the Font Awesome Wordpress plug-in. It works for the majority of the browsers, however Firefox is showing only a few characters.
It's the magenta menu on this website: http://www.babystuf.nl. (the blocks in the left sidebar) I tried everything (updates to Font awesome 4.X without the plugin, added .htacess in the /font folder, changed the .. /fonts/ path to a static path). Without succes.
Weirdest thing is, that we run a copy of that same website (http://www.baby-wereld.nl) and it's working fine there! Different server, same WP version, however with less plugins than babystuf.nl.
Who has an idea on how to fix this?
Thanks! M
UPDATE: It turned out that we used the All In One Event Wordpress plug-in, that uses Font Awesome as well… And that's a older version than 3.2.1. Only Firefox loaded that font set…
I had this problem. I thought I had tried EVERYTHING (htaccess, changing file paths, playing with permission, etc) but it turned out I had previously tried to use a Font Awesome plugin in my wordpress installation and Firefox was picking up this older version of FontAwesome. Disabling the plugin let the browser look for the files I had uploaded myself and the problem is now solved!