我想使用字体awesome内我的jsf应用程序,但不幸的是,似乎有些图标不显示。而不是图标,我只能看到一个方形符号。
我的jsf页面是这样的:
<div class="centerbox" style="bottom: 5mm; top: 5mm;">
<i class="fa fa-chain fa-5x"></i>
<i class="fa fa-wheelchair fa-5x"></i>
<h:outputLabel value="#{msg.systemNotAvailable}" />
<a href="tel:xyz" class="mobi-button mobi-button-attention"><h:outputText value="Allocation"/></a>
</div>
我将css文件包含如下:
<h:outputStylesheet name="font-awesome.css" library="css" media="screen"/>
奇怪的是,fa-chain图标显示正确,但是轮椅图标显示错误。
当我查看html并更改图标的代码时,似乎有几个图标不工作。
我尝试使用最新版本4.4.0
有没有人遇到这个问题,或者可以给我一个如何解决的提示?
你可以使用MaxCDN中的live css,例如:http://jsfiddle.net/web_nfo/zfdgna5w/
https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css
(来源:https://fortawesome.github.io/Font-Awesome/get-started/#bootstrapcdn)
也许字体文件(fontawesome-webfont。测试结束,fontawesome-webfont。Woff2等)没有正确加载。在css中有一些相对路径,如果你的(本地)服务器上没有字体,它将不起作用。
首先感谢您的回复。我认为问题是,字体文件安装在webapp的资源文件夹中。因为我把它放到WebContent- root中,所有的图标都可以显示了。
非常感谢您的支持:-)