Font Awesome icons are not showing on IE7. They do on IE8, IE9, FF and Chrome.
Example HTML:
<span rel="tooltip" data-placement="top" data-original-title="Click to add question to favorites">
<i class="icon-star-empty"></i>
</span>
Files included:
<link href="/css/bootstrap.css" rel="stylesheet">
<link href="/css/font-awesome.css" rel="stylesheet">
<link href="/css/font-awesome-ie7.css">
Request to .woff:
Request:
URL:http://example.com/font/fontawesome-webfont.woff
Response:
Accept-Ranges:bytes
Connection:Keep-Alive
Content-Length:41752
Content-Type:application/octet-stream
Date:Tue, 11 Dec 2012 11:31:51 GMT
ETag:"4095e-a318-4cf1d75fb20dd"
Keep-Alive:timeout=5, max=98
Last-Modified:Thu, 22 Nov 2012 23:02:27 GMT Server:Apache/2.2.22 (Ubuntu)
I've configured this on Apache's /etc/apache2/mods-enabled/mime.conf (and restarted Apache):
AddType application/octet-stream .woff
Am I missing any configuration?
Quick update to this thread.
FontAwesome no longer supports IE7, but if you're in the unfortunate situation where you need to support it because you need to support proprietary software, whos name I shall not mention, that includes it as its only browser, and refuses to upgrade even though, at the time of this post, IE8 has been out for nearly 4 years and we are now on IE11, then do as I did:
Download the ie7.min.css file and add the section as indicated in the answer above:
Open the ie7.min.css file and change all the ".icon-" to ".fa-", since FontAwesome has changed its naming conventions.
This will get you support on about 95% of the icons for the FA 4.0.3 (newly introduced fonts won't be supported on the old ie7.min.css file.
Better use the IE7 conditional comment, so the file gets loaded in IE7 only. (taken from the Fontawesome example)
<link rel="stylesheet" media="all" href="assets/css/your-icons.css" />
<!--[if IE 7]>
<link rel="stylesheet" media="all" href="assets/css/your-icons-ie7.min.css" />
<![endif]-->
The configuration was correct after all. For some reason font-awesome-ie7.css wasn't loading correctly. After making sure that this file was loading, everything worked.
There is a way to support IE7 even for new icons.
First download this as base.
https://gist.github.com/dorajistyle/7461853
Then if any icon is missing go that icon in the iconlist. For example the fa-balance-scale that is new.
http://fontawesome.io/icon/balance-scale/
There you'll see that the unicode char is f24e
Then add this to the font-awesome-ie7.min.css in the end
.fa-balance-scale {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML =
'');
}
Repeat for any icons you're using
Related
In my AngularJS app with the ui-router dependency, for some reason - on Google Chrome - my background-images in my stylesheet is not loading (doesn't even show up in Network tab in dev tools).
Maybe it is because I've bound the link href to my scope, and change it on the fly?
index.html:
<link rel='stylesheet' ngIf='stylePath' ng-href='{{stylePath}}'>
And in my controller I set $scope.stylePath to 'login.css'.
If I open dev tools and uncheck the background-image, and check it again, it loads the image and shows it fine.
No problems on IE11.
Any ideas?
Change from:
<link rel='stylesheet' ngIf='stylePath' ng-href='{{stylePath}}'>
To:
<link rel='stylesheet' ng-if='stylePath' ng-href='stylePath'>
I have developed Drupal site . But when I access my site using HTTPS:// browser gives me a message "This page has insecure content" . I have putted my site data on secure site .
I load JS file in that page for some purpose.
So,Is it JS file issue?
I don't think it should be JS or CSS issue, unless you include them using absolute URLs:
For example if you add the following lines in your theme's template file:
<link rel="stylesheet" type="text/css" href="http://yoursite/mystyle.css">
<script src="http://yoursite/myScript.js"></script>
This serves the JavaScript through http instead of https. Instead you should use:
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script src="myScript.js"></script>
notice that the URLs in the second piece of code contains relative URL, and would serve the files with the same protocol with which the site is accessed via a browser.
If this is not the case, you have to scan through all the links on the page, and find the links which are start with the format http://... instead of https://.... This problem arises when a browser finds that not all content of the page is being served using encryption.
Hope that makes sense. Please feel free to ask further queries.
Indeed, you might have some assets (css or javascript) loaded from "non secure" source (using http protocol instead of https).
So I'm trying to use a Google Webfont on a GAE site. The font works when I browse the site locally, but after I deploy and go to the .appspot.com address, the font no longer works and defaults to "cursive".
Here's the relevant code:
CSS:
.logo {
font-family: 'Nothing You Could Do', cursive;
}
HTML:
<head>
<link href='http://fonts.googleapis.com/css?family=Nothing+You+Could+Do' rel='stylesheet' type='text/css'>
</head>
<a class="logo" href="/">Project</a>
I believe it is a browser issue.
Quoting from here:
What browsers are supported? The Google Web Fonts API is compatible
with the following browsers:
Google Chrome: version 4.249.4+ Mozilla Firefox: version: 3.5+ Apple
Safari: version 3.1+ Opera: version 10.5+ Microsoft Internet Explorer:
version 6+
What do unsupported browsers see? If someone using an unsupported
browser visits a page that uses the Web Fonts API, then the text is
displayed using the next available font in your CSS font stack.
I just started using cakephp and upto so far everything is going well, but my problem is that i want to have an IE6 specific stylesheet, i have been doing this for quite sometime with just normal HTML but if i try to do it in cakephp is doesn't put the stylesheet.
My code for outputting the IE6 stylesheet inside the default.ctp is
<!--[if IE 6]>
<?php echo $this->Html->css('ie6');?>
<![endif]-->
I have my stylesheets under webroot/css/ie6.css
Can anybody tell me what i might be doing wrong.
Thanks
Dee
When I add that code to my CakePHP project I get this output
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="/css/ie6.css" />
<![endif]-->
So it appears to be working fine. You might want to check if the file is actually at the right place (try to append /css/ie6.css behind the URL of the page you're looking at and see if it returns a 404 or your CSS file).
Nothing wrong with the conditional comment too, so my guess would be a file error.
I have a web application running on tomcat. I want to setup a favicon for it. Where should i place it in the tomcat web application.
If you place a file called favicon.ico in your document root (/), it will automatically used.
Just to summarize answers (1, 2) up:
Name your icon favicon.ico and put it into the /src/main/webapp (for Maven layout) or /WebContent (for standard Eclipse layout).
Specify icon in every HTML page (or master page if present):
<head>
<link rel="shortcut icon" href="favicon.ico"/>
</head>
Refresh project / clean/restart server / refresh page with Ctrl+F5 (to skip browser's cache).
This might be useful, but I don't remember having had to do it:
http://stonescape.net/roller/xtian/entry/implementing_favicon_ico_with_tomcat