Font awesome icon не отображается в IE 11, но отображается в других браузерах

Я новичок в шрифтовых знаках. У меня есть одна страница, в которой есть фильтр, где пользователь может искать данные. Я добавил шрифт awesome icon непосредственно перед поисковой ссылкой (как показано ниже снимок экрана), я вижу этот значок во всех браузерах, кроме IE 11. Самое забавное, что у меня есть этот значок и на других страницах, и я вижу его в IE 11, но я не вижу этот значок на этом (как показано ниже снимок экрана).

Вот скриншот из IE 11:

введите описание изображения здесь

Вот скриншот из хрома:

введите описание изображения здесь

Может ли кто-нибудь помочь мне в этом?

ОТВЕТЫ

Ответ 1

У IE есть проблема с доставкой @font-face с HTTP-заголовком Pragma=no-cache. Дополнительная информация здесь

К сожалению, проблема отмечена как не разрешимая, но есть некоторые обходные пути. Тот, который работал у меня, использовал фильтр сервлета, который позволяет избежать установки заголовка Pragma.

Другие решения, которые не сработали для меня:

Шрифт-awesome исчезает после обновления для всех ie браузеров ie11, ie10, ie9

Шрифт awesome icons становится невидимым в IE после обновления

Ответ 2

У меня была такая же проблема, я решил ее, добавив этот метатег в качестве тега FIRST в <head>:
<meta http-equiv="X-UA-Compatible" content="IE=edge">

Кроме того, согласно официальной документации проверьте следующее:

Для Internet Explorer: вы не используете файлы с опцией no-store в заголовке Cache-control (Ref: # 6454); Для Internet Explorer и HTTPS: вы не используете файлы с параметром no-cache в заголовке Pragma.

Ответ 3

В консоли IE попробуйте запустить следующий 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" />');

Если он работает, попробуйте импортировать его CDN вместо локального сохранения.

Ответ 4

Это фиксировало мои значки шрифтов в IIS: добавьте web.config в каталог шрифтов с этим содержимым:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Pragma" value="none" /> 
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>

Ответ 5

У меня была такая же проблема с шрифтом. Я добавил пользовательский httpmodule в моем приложении .net.

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");
            }
        }
    }

И зарегистрировал модуль в web.config.

<system.webserver>
    <modules>
          <add type="MyHttpModule, Culture=neutral" name="MyHttpModule"/>
    </modules>
</system.webserver>

Он решил проблему.

Ответ 6

Если вы используете Spring MVC с защитой Spring, Spring Безопасность автоматически добавляет заголовки кеша и поэтому вызывает разрыв шрифта в IE11.

(https://docs.spring.io/spring-security/site/docs/current/reference/html/headers.html#headers-cache-control)

Я решил проблему, добавив ResourceHandler в мой WebMvcConfiguration для шрифта-awesome, настроенный так, чтобы браузер мог кэшировать шрифты.

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);        
    }
}

Ответ 7

Если сервер Apache обслуживает файлы шрифтов, добавьте следующие записи в httpd.conf или .htaccess.

Чтобы установить правильные типы mime для файлов шрифтов, добавьте эти строки в 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

Чтобы обновить заголовки файлов шрифтов, это исправление отлично работает для рендеринга шрифтовых значков в браузерах IE.

<LocationMatch "\.(eot|otf|woff|ttf)$">
   Header unset Cache-Control
   Header unset no-store
</LocationMatch >