Css 字体图标不在Chrome或IE中显示，但在Firefox中显示_Css_Google Chrome_Internet Explorer_Font Awesome

Css 字体图标不在Chrome或IE中显示，但在Firefox中显示

css google-chrome internet-explorer

Css 字体图标不在Chrome或IE中显示，但在Firefox中显示,css,google-chrome,internet-explorer,font-awesome,Css,Google Chrome,Internet Explorer,Font Awesome,我花了太多时间试图弄明白为什么我的字体图标没有出现在Chrome上。这是一个django项目，但这不重要。。css文件加载得很好，但是字体可怕图标的元素没有在chrome或IE中显示，而在Firefox中显示。如果有人知道我做错了什么。。。以下是我的片段。我的文件位于正确的位置，因此这也不是问题所在 {% load staticfiles %} <html> <head> <link rel="stylesheet" href="

我花了太多时间试图弄明白为什么我的字体图标没有出现在Chrome上。这是一个django项目，但这不重要。。css文件加载得很好，但是字体可怕图标的元素没有在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=Lobster&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>

我的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;
}

如果有的话，您在浏览器的开发工具控制台（例如，点击F12）的页面加载中看到了什么？如果您使用CDN（），它们是否正确加载？如果是这样，那就意味着服务器配置问题。字体在服务器上的位置是什么，因为它们与css文件的位置有关。@EricLaw我确实看到在“网络”选项卡上加载了fontawesome文件。但是，它们不会显示在“图元”选项卡上。“没有错误，它们根本就不会出现。”@TiesonT。他们没有。我尝试从我的a服务器引用它们，并使用CDN url。。它们会出现在firefox中，但不会出现在chrome中，这很奇怪……如果有的话，您在浏览器的开发工具控制台（例如，点击F12）的页面加载中看到了什么？如果您使用CDN（），它们加载是否正确？如果是这样，那就意味着服务器配置问题。字体在服务器上的位置是什么，因为它们与css文件的位置有关。@EricLaw我确实看到在“网络”选项卡上加载了fontawesome文件。但是，它们不会显示在“图元”选项卡上。“没有错误，它们根本就不会出现。”@TiesonT。他们没有。我尝试从我的a服务器引用它们，并使用CDN url。。它们出现在firefox中，但不是chrome，这很奇怪。。。

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