网页网址上未显示 FontAwesome 图标答案

【问题标题】：FontAwesome icons not showing on web url网页网址上未显示 FontAwesome 图标
【发布时间】：2016-03-16 01:17:33
【问题描述】：

我用 HTML 设计了一个网站并使用了 FontAwesome 图标。当我在 localhost 上运行网站时，图标显示正常。但是在 url 上它不起作用。这里的网址：Demo

这是我的自定义 CSS：

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

与

[class^="icon-"], [class*=" icon-"] {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    text-decoration: inherit;
    -webkit-font-smoothing: antialiased;
}

与

.icon-envelope-alt:before{content:"\f003";}
.icon-heart:before{content:"\f004";}
.icon-star:before{content:"\f005";}
.icon-star-empty:before{content:"\f006";}
.icon-user:before{content:"\f007";}
.icon-film:before{content:"\f008";}
.icon-th-large:before{content:"\f009";}
.icon-th:before{content:"\f00a";}
.icon-th-list:before{content:"\f00b";}
.icon-ok:before{content:"\f00c";}
.icon-remove:before{content:"\f00d";}
.icon-zoom-in:before{content:"\f00e";}
.icon-zoom-out:before{content:"\f010";}
.icon-power-off:before,.icon-off:before{content:"\f011";}
.icon-signal:before{content:"\f012";}

谁能帮我解决这个问题。

谢谢你。

【问题讨论】：

寻求代码帮助的问题必须在问题本身中包含重现它所需的最短代码。尽管您提供了一个示例链接，但如果该链接失效，您的问题对于未来遇到相同问题的其他 SO 用户将毫无价值。

标签： html css font-awesome-4

【解决方案1】：

我知道有人问过这个问题，但是这个答案可能会有所帮助：

这是一个服务器配置：你应该在 web.config 中添加这个

    <system.webServer>
    <staticContent>
      <clientCache cacheControlCustom="public" cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00" />
      <remove fileExtension=".woff" />
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>
</system.webServer>

完整参考here

【讨论】：

【解决方案2】：

你必须在标签头中包含FontAwesome的样式表

<head>
    ...
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    ...

然后，你在菜单中使用：

<span class="icon-angle-down" style="color: rgb(51, 51, 51);"></span>

正确的版本是：

<i class="fa fa-angle-down" style="color: rgb(51, 51, 51);"></span>

【讨论】：

我之前使用过自定义 css 即元素，这就是我使用 span 这样的原因
啊，好吧，我不知道这个。所以，问题是文件在服务器中的位置不正确

【解决方案3】：

我们在路径上找不到字体：http://qubedns.co.in/codes/design/font/fontawesome-webfont.eot@v=3.2.1

此网页不可用

DNS_PROBE_FINISHED_NO_INTERNET

您在代码中使用的路径是什么

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

【讨论】：