I am new to font-awesome icons. I have one page in which there is a filter where user can search the data. I have added font awesome icon just before the search link (as per below screenshot), I can see this icon in all the browsers except IE 11. The funny thing is I have this icon in other pages also and I can see it in IE 11, but I cannot see this icon on this (as per below screenshot) page only.
Here is the screenshot from IE 11:
Here is the screenshot from chrome:
Can anyone help me out on this?
I had the same issue, I solved it by adding this meta tag as the FIRST tag in <head>:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Also, according to the official documentation, check the following:
For Internet Explorer: you don't serve files with no-store option in Cache-control header (Ref: #6454);
For Internet Explorer and HTTPS: you don't serve files with no-cache option in Pragma header.
IE has an issue with #font-faces being delivered with the HTTP-Header Pragma=no-cache. You can see it recorded on the issue tracker here
Unfortunately the issue is marked as not resolvable but there are some workarounds. The one that worked for me was using a servlet filter that avoids the Pragma header being set.
Other solutions that not worked for me:
Font-awesome disappears after refresh for all ie browsers ie11,ie10,ie9
Font awesome icons becomes invisible in IE after refresh
From IE console try to run following script
$('head').append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" type="text/css" />');
If it work then try to import it CDN instead of storing it locally.
Alternatively, it might be your Internet Explorer settings that prevent the browser from downloading fonts. This was the case on one of our tightly secured servers.
Try these steps:
Open Internet Explorer
Go to Internet Options
Under Security tab, click on Custom Level...
Scroll down to Downloads and make sure the Font Download is Enabled
If you are using Spring MVC with Spring Security, Spring Security automatically adds no cache headers and so causes font-awesome to break on IE11.
(https://docs.spring.io/spring-security/site/docs/current/reference/html/headers.html#headers-cache-control)
I solved the issue by adding a ResourceHandler in my WebMvcConfiguration for font-awesome configured to allow the browser to cache the fonts.
public class WebMvcConfiguration extends WebMvcConfigurerAdapter
{
#Override
public void addResourceHandlers( ResourceHandlerRegistry registry )
{
registry.addResourceHandler("/assets/vendor/font-awesome/fonts/**")
.addResourceLocations("/assets/vendor/font-awesome/fonts/")
.setCachePeriod(31556926);
}
}
I faced the same Issue and I just added the following Link in the Tag and it worked.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Hope this helps!
If apache server is serving Font files, addthe following entries to the httpd.conf or .htaccess in .
To set right mime-types for font files, add this lines to config:
AddType application/vnd.ms-fontobject .eot
AddType font/truetype .ttf
AddType font/opentype .otf
AddType font/opentype .woff
AddType image/svg+xml .svg .svgz
To update font files headers, This fix perfectly worked to render Font Icons in IE Browsers.
<LocationMatch "\.(eot|otf|woff|ttf)$">
Header unset Cache-Control
Header unset no-store
</LocationMatch >
This fixed my font-icons in IIS: Add a web.config to your font directory with these contents:
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Pragma" value="none" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>
I had the same issue with font awesome. I added a custom httpmodule in my .net application.
public class MyHttpModule : IHttpModule
{
public void Dispose()
{
}
public void Init(HttpApplication context)
{
context.EndRequest += new EventHandler(Context_EndRequest);
}
protected void Context_EndRequest(object sender, EventArgs e)
{
HttpResponse response = HttpContext.Current.Response;
if (string.Compare(HttpContext.Current.Request.Browser.Browser, "InternetExplorer", StringComparison.InvariantCultureIgnoreCase) == 0)
{
response.Headers.Set("Pragma", "none");
}
}
}
And registered the module in web.config.
<system.webserver>
<modules>
<add type="MyHttpModule, Culture=neutral" name="MyHttpModule"/>
</modules>
</system.webserver>
It solved the issue.
I had the same issue with Font Awesome 4.7 and IE 11. I fixed it by adding the following meta info in the <head> section:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
We recently had this issue serving Font Awesome font files from our Rails application. The confusion was that we weren't passing Pragma or Cache-control response headers - so the previous answers in this post were a bit confusing.
To summarize - this issue is caused by these two conditions:
The request is being initiated from font-face, over an HTTPS connection (critical for re-producing this bug locally).
The Pragma header has the value no-cache OR in our case, we're serving everything gzipped, and the Vary header is passed with a value other than Accept-Encoding.
We fixed this by adding the following to our Rack::CORS config:
config.middleware.insert_before 0, Rack::Cors do
allow do
origins '*'
# Setting Vary to Accept-Encoding required or IE11 fonts will not load from local cache
resource('*.eot',
headers: :any,
credentials: false,
methods: [:get],
vary: ['Accept-Encoding'])
end
end
I faced the same issue. My technology stack is Spring boot 2.0 and Angular 8.
This issue occurs only when you try to refresh the page over HTTPS on IE 11.
The problem is, the browser (IE 11) expects Cache-Control max-age. You need to set this header for static resources.
To resolve this issue set the following property in application.property file.
spring.resources.cache.cachecontrol.max-age=14400
In my case, it was corrupted .eot font file. I had generated new one ( + new .css styles) and it fixed the problem. Try it.
I've encountered the same issue, searched everywhere and no luck. It appears it was due to Microsoft cumulative Security update which stopped loading Fonts/Images especially :
https://support.microsoft.com/en-us/help/4486474/cumulative-security-update-for-internet-explorer-february-12-2019
https://support.microsoft.com/en-us/help/4491113/cumulative-update-for-internet-explorer-february-19-2019
To fix it you need to install the March patch:
https://support.microsoft.com/en-us/help/4489873/cumulative-security-update-for-internet-explorer-march-12-2019
For internet explorer 11, you can change your CSS like that :
nb-icon.menu-icon {
visibility: hidden;
}
nb-icon.menu-icon::before{
visibility: visible;
}
either of 2 solutions worked for me
Check whether all the below mentioned
FontAwesome.otf
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff
fontawesome-webfont.woff2
And I deleted the version parameter, eg. ?v4.7.0 in every src of the font in the CSS and it is now working in my IE 11.
Related
I have a server, LAMP, set up and a CakePHP App. When I request a web page through any web browser, it always replies with a 304 status, serving old pages even after i have changed the page. It seems like the server keeps any previously accessed page in a cache and serves it back to anybody that request it afterwards. E.g: User "X" logs into this system and access the page "home" and logs out. When a different user "Y" logs into the system, he is going to see "X"'s "home" whereas he is supposed to access his home page with his name displayed. Instead he sees it as X has previously accessed it. When I completely delete a resource, say "home" page, it can still be accessed. I have checked and the pages are served with a 304 not modified status code; However I failed to modify this behavior in my apache Settings; I am a newbie and I am out of solutions. Any help would be much appreciated here.
In case anyone else has the same problem, I will reply to my own question. I have found a potential cause to this behaviour. My apache settings are fine but my lan has an Apache Traffic Server, which kind of caches some resources, things like images and css files are cached by default. If modification is brought to the file, it is advised to rename it so that the old file is not served. For the web pages, I forced their non caching by adding the following:
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="cache-control" content="no-store" />
<meta http-equiv="cache-control" content="must-revalidate" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="0" />
As I was using cakePHP, I also added the following lines in my beforeFilter method of AppController file (asked here):
function beforeFilter() {
/**
* https://stackoverflow.com/questions/27804628/cakephp-caching-issue-when-redirecting-back-to-same-page
*/
header('Cache-Control: no-cache, no-store, must-revalidate');
header('Pragma: no-cache');
header('Expires: 0');
}
I hope it helps someone.
There are always the log showing: file does not exist c:/wamp/www/favicon.ico in apache error_log. I used wampserver, why?
This happens because (almost every) browser searches for a favicon by default. If the accessed page don't inform a valid URL for it, Apache uses the root directory.
You have two choices. You can create a website icon for each of your websites, or you tell Apache not to log that event as an error message.
If you choose the second option, add the following code to each VirtualHost, or at least the ones which don’t have a favicon file:
Redirect 404 /favicon.ico
<Location /favicon.ico>
ErrorDocument 404 "No favicon"
</Location>
Or, you create an empty file with the name “favicon.ico” in the directory root of Apache (for exemple /var/www/ , but no favicon will be shown by the browsers for your site).
Do you have a reference to the favicon.ico file in your HTML source?
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
Even if you don't, many browsers try to access this file anyway when visiting a new page. Favicon is used when adding the website to favourites/bookmarks. Some browsers (for example Firefox) also display favicon on the website's tab on the top of the screen.
Your best bet would be to simply add an favicon.ico file with a 16x16 icon to the c:/wamp/www/ directory.
favicon.ico is the image that is showed next to the url in the address bar. Every browser search for it. For example the StackOverflow logo in this page.
see this http://nfolamp.wordpress.com/2010/06/28/apache-favicon-ico-does-not-exist-yes-its-truly-annoying/ (dead link)
the contents of that link are in the voted answer https://stackoverflow.com/a/11099560/876038
Try restarting your browser. I thought I had a major problem with this, but as it turns out, mozilla just caches sites favicons. Restarting it fixed the issue.
I am not able to find and way to set some header in .htaccess file only if the browser is IE9.
Pseudo code for my requirement is:
if (IE 9) {
header set (value)
} else {
header set (value)
}
Please suggest how I can achieve this in my .htaccess file.
I got the solution after reading bunch of lines in Apache doc :) .Just include these lines in htaccess, Its working fine for me.
BrowserMatch "MSIE 9.0" ie9
header set X-UA-Compatible "IE=EmulateIE8" env=ie9
According to this article <meta http-equiv="X-UA-Compatible" content="IE=8" /> should give you the desired result regardless of which version of IE you're using.
I got this error while working with web app.
This is my master page
<head runat="server">
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
This is the error:
Error: The stylesheet http://localhost:55381/Login.aspx?ReturnUrl=%2fStyles%2fSite.css was not loaded because its MIME type, "text/html", is not "text/css".
Source File: http://localhost:55381/Login.aspx
Line: 0
Looks like your code is requiring a login to access the CSS stylesheet, and returning a HTML login page instead of the CSS.
To verify, try pasting the URL to the stylesheet into your browser, for instance http://localhost:55381/Styles/Site.css - if you get a login page instead of CSS, that's what you need to fix.
Try this:
<location path="~/Styles">
<system.web>
<authorization>
<allow users="*"/>
</authorization>
</system.web>
Where Styles is the folder that contains style sheet. I solved it this way
#DavidPrecious gave a great answer that led me to the solution.
In my case, the local computer's Users group needed to be given Read permissions to the c:\Inetpub folder in order to allow the static content to be delivered properly.
This is more likely an issue at your server side. You request style sheet page Styles/Site.css from the server of type text/css, but your server might be responding to this request with test/html. I had this issue when my server was running in Python and my server was replying to requested css files with header text/html (as that of my index.html file). I re-arranged my server code and assigned the correct headers to its corresponding pages and my issue got resolved.
Another possibility: you've modified your .htaccess file to serve css as html. Maybe something like this, for example:
<filesMatch "\.(htm|html|css|js)$">
ForceType 'text/html; charset=UTF-8'
</filesMatch>
You will want to remove the css from the first line if you've done this.
For me it was an nginx configuration problem, in the file where you declare the path to your static content. I had to move /etc/nginx/mime.types out of the http{} block and further down into where I was serving the static content from. It could similarly be an apache or IIS problem as well, depending on your technology stack.
location / {
include /etc/nginx/mime.types;
root /path/to/static/content;
try_files $uri /index.html = 404;
}
My server doesn't seem to gzip my css and javascript files. It works for HTML.
Here's my config: http://pastie.org/1105941
And here's my result: http://i35.tinypic.com/audv0k.jpg
Also tested Google Page Speed, and made Apache2 log the compression results. They say the same.
What could be wrong here, since it does compress the HTML?
As far as I can see, it is working ... using firefox and the webdeveloper plugin the response for both css and js reports gzip
Download a CSS file with a browers and check the content type. Chances are that it's application/binary or something. If that is the case, you must tell the server that *.css should be sent as text/css, etc:
AddType text/css .css