我用HTML设计了一个网站并使用了FontAwesome图标。 当我在localhost上运行网站时,图标显示正常。 但是在网址上它不起作用。 这里是网址: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";}
任何人都可以帮我解决这个问题。
感谢你。
答案 0 :(得分:1)
您必须在标记头
中包含FontAwesome的样式表console>cordova emulate android
然后,您在菜单中使用:
<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>
答案 1 :(得分:0)
您的问题是服务器找不到您指定位置的文件。
如果您检查页面,您将在控制台中看到这些错误:
selected.isEnabled()
您需要更改路径,以便正确加载字体真棒文件。
答案 2 :(得分:0)
我们无法在路径上找到字体: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;
}
答案 3 :(得分:0)
我知道这被问了一段时间,但是这个答案可能会有所帮助:
这是服务器配置: 您应该将其添加到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