font awesome icon is not appearing in IE 11, but showing in other browsers

前端未结

关注

 16  1400

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

相关标签:

16条回答

萌比男神i

2020-12-01 07:19
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
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
清酒与你

2020-12-01 07:20
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" />
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
一个人的身影

2020-12-01 07:22
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:
1. The request is being initiated from font-face, over an HTTPS connection (critical for re-producing this bug locally).
2. 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
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
深忆病人

2020-12-01 07:22
either of 2 solutions worked for me
1. Check whether all the below mentioned FontAwesome.otf fontawesome-webfont.eot fontawesome-webfont.svg fontawesome-webfont.ttf fontawesome-webfont.woff fontawesome-webfont.woff2
2. 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.
0 讨论(0)
发布评论:

提交评论
- 加载中...
佛祖请我去吃肉

2020-12-01 07:23
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);        
    }
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
青春惊慌失措

2020-12-01 07:24

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

0 讨论(0)
发布评论:

提交评论
- 加载中...