Блог

Главная - Вопросы по программированию - Значки шрифтов Awesome не отображаются в Chrome или IE, но есть в Firefox

Значки шрифтов Awesome не отображаются в Chrome или IE, но есть в Firefox

#css #google-chrome #internet-explorer #font-awesome

#css #google-chrome #internet-explorer #шрифт -awesome

Вопрос:

Я потратил слишком много времени, пытаясь понять, почему, черт возьми, мои значки font awesome не отображаются в Chrome. Это проект django, но это не должно иметь значения.. Файлы css загружаются нормально, но элементы для значков font awesome не отображаются в Chrome или IE, однако они есть в Firefox. Если у кого-нибудь есть идеи, что я могу делать неправильно… Вот мои фрагменты. Мои файлы находятся в правильных местах, так что это тоже не проблема.

      {% load staticfiles %}

<html>
    <head>
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="{% static 'font-awesome/css/font-awesome.css' %}">
        <link rel="stylesheet" href="{% static 'css/blog.css' %}">
        <link href="//fonts.googleapis.com/css?family=Lobsteramp;subset=latin,latin-ext" rel="stylesheet" type="text/css">
        <title>Naomi's blog</title>
    </head>
    <body>
        <div class="page-header">
            {% if user.is_authenticated %}
                <a href="{% url 'post_new' %}" class="top-menu"><span class="fa fa-plus fa-fw"></span></a>
                <a href="{% url 'post_draft_list' %}" class="top-menu"><span class="fa fa-edit fa-fw"></span></a>
            {% endif %}    
            <h1><a href="/">Naomi's Blog</a></h1>
        </div>
        <div class="content container">
            <div class="row">
                <div class="col-md-8">
                {% block content %}
                {% endblock %}
                </div>
            </div>
        </div>        
    </body>
</html>

Шрифт-awesome.css бит:

 @font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.6.3');
  src: url('../fonts/fontawesome-webfont.eot?#iefixamp;v=4.6.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('font-awesome/fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Мой файл CSS:

 .page-header {
    background-color: #20B2AA;
    margin-top: 0;
    padding: 20px 20px 20px 40px;
}

.page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active {
    color: #ffffff;
    font-size: 36pt;
    text-decoration: none;
}

.content {
    margin-left: 40px;
}

h1, h2, h3, h4 {
    font-family: 'Lobster', cursive;
}

.date {
    color: #828282;
}

.save {
    float: right;
}

.post-form textarea, .post-form input {
    width: 100%;
}

.top-menu, .top-menu:hover, .top-menu:visited {
    color: #ffffff;
    float: right;
    font-size: 26pt;
    margin-right: 20px;
}

.post {
    margin-bottom: 70px;
}

.post h1 a, .post h1 a:visited {
    color: #000000;
}

Комментарии:

1. Что, если что-нибудь, вы видите в консоли инструментов разработчика браузера (например, нажмите F12) при загрузке страницы?

2. Правильно ли они загружаются, если вы используете CDN ( bootstrapcdn.com/fontawesome )? Если это так, это подразумевает проблему с конфигурацией сервера.

3. Где шрифты расположены на сервере, потому что они находятся относительно того, где находится файл css.

4. @EricLaw Я вижу, что на вкладке Сети загружаются файлы fontawesome. Однако они не отображаются на вкладке элементы. Ошибок нет, они просто не отображаются вообще.

5. @TiesonT. это не так. Я пытался ссылаться на них со своего сервера a, а также использовать URL-адрес CDN.. они отображаются в firefox, но не в Chrome, что очень странно…

Метки: