使用xpages的font-awesome即使在加载后也不会生效

Question

我在xpages中使用font-awesome。我有一个名为securePolling的主题，我在其中提供了资源的链接 securePolling中的代码是

<theme extends="webstandard" xmlns:xsi="http://www.w3.org/2001/XMLSchema- instance"  xsi:noNamespaceSchemaLocation="platform:/plugin/com.ibm.designer.domino.stylekits/ schema/stylekit.xsd" >

<resource rendered="#{javascript:context.getProperty('xsp.resources.aggregate').equals('true')}">
    <content-type>text/css</content-type>
    <href>font-awesome-fontFamily.css</href>
</resource>
<resource rendered="#{javascript:context.getProperty('xsp.resources.aggregate').equals('true')}">
     <content-type>text/css</content-type>
     <href>font-awesome-4.2.0/font-awesome-4.2.0/css/font-awesome.min.css</href>
</resource> 

所以font-awesome文件夹位于WebContent文件夹中。 下面是xsp.properties

的代码

xsp.ajax.renderwholetree=false
xsp.application.timeout=30
xsp.compress.mode=gzip
xsp.error.page=error.xsp
xsp.html.page.encoding=utf-8
xsp.library.depends=com.ibm.xsp.extlib.library
xsp.persistence.maxviews=16
xsp.persistence.mode=basic
xsp.resources.aggregate=false
xsp.session.timeout=30
xsp.theme=securePolling.theme
xsp.upload.maximumsize=10000

在所有这个操作之后我可以在浏览器调试工具中检查它是否显示加载了font-awesome.css但是字体对ant图标没有生效， 这里的图像会更清晰。

经过一些研究还尝试将font-awesome.css代码更改为

 @font-face {
 font-family: "FontAwesome";
 src: url('font/fontawesome-webfont.eot');
 src: url('font/fontawesome-webfont.eot?#iefix') format('eot');
 src: url('font/fontawesome-webfont.woff') format('woff');
 src: url('font/fontawesome-webfont.ttf') format('truetype');
 src: url('font/fontawesome-webfont.svg#FontAwesome') format('svg');
 font-weight: normal;
 font-style: normal;
 }

任何帮助都会非常感激。

当聚合更改为＆＃34; false＆＃34;时，它工作正常，但是当它是＆＃34; true＆＃34;它没有生效。在更改为＆＃34; true＆＃34;。

之后，图像结果和控制台也有效。

Answer 1

我认为css应该如下所示。但请注意，此处的相对网址仅适用于聚合关闭：

@font-face {
    font-family: "FontAwesome";
    src: url('../font/fontawesome-webfont.eot');
    src: url('../font/fontawesome-webfont.eot?#iefix') format('eot');
    src: url('../font/fontawesome-webfont.woff') format('woff');
    src: url('../font/fontawesome-webfont.ttf') format('truetype');
    src: url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');
    font-weight: normal;
    font-style: normal;
}

此外，他们肯定在名为＆＃34; font＆＃34;？的文件夹中通常它们位于名为＆＃34; fonts＆＃34;的文件夹中。在Font Awesome下载。

启用聚合后，您需要使用不同的相对网址：

@font-face {
    font-family: "FontAwesome";
    src: url('../../../font/fontawesome-webfont.eot');
    src: url('../../../font/fontawesome-webfont.eot?#iefix') format('eot');
    src: url('../../../font/fontawesome-webfont.woff') format('woff');
    src: url('../../../font/fontawesome-webfont.ttf') format('truetype');
    src: url('../../../font/fontawesome-webfont.svg#FontAwesome') format('svg');
    font-weight: normal;
    font-style: normal;
}

因此，您可能希望创建两个版本的字体awesome css文件，一个在聚合关闭时加载，另一个在聚合打开时加载。或者有一个版本使用绝对网址而不是相对网址。

还要注意字体真棒带有＆＃34; .css＆＃34;文件和最小化版本＆＃34; .min.css＆＃34;，所以请务必根据需要更改两个版本。

Answer 2

上述问题背后的实际原因是我在＆＃34; .css＆＃34;文件到字体文件，位于字体目录中。

从一开始我们就可以看到，＆＃34; .theme＆＃34;资源路径为＆＃34; font-awesome-4.2.0 / font-awesome-4.2.0 / css / font-awesome.min.css＆＃34;

的文件代码

 <resource rendered="#{javascript:context.getProperty('xsp.resources.aggregate').equals('true')}">
 <content-type>text/css</content-type>
 <href>font-awesome-4.2.0/font-awesome-4.2.0/css/font-awesome.min.css</href>

根据路径有2个文件夹，然后是字体文件夹。所以我删除了一个文件夹并制作了这样的路径＆＃34; font-awesome-4.2.0 / css / font-awesome.min.css＆＃34;。

现在，当我将聚合打开时，字体文件夹的路径就像这样。这对我有用。

@font-face {
font-family: "FontAwesome";
src: url('font-awesome-4.2.0/font/fontawesome-webfont.eot');
src: url('font-awesome-4.2.0/font/fontawesome-webfont.eot?#iefix') format('eot');
src: url('font-awesome-4.2.0/font/fontawesome-webfont.woff') format('woff');
src: url('font-awesome-4.2.0/font/fontawesome-webfont.ttf') format('truetype');
src: url('font-awesome-4.2.0/font/fontawesome-webfont.svg#FontAwesome') format('svg');
font-weight: normal;
font-style: normal;
}

当我把聚合关闭时代码看起来像这样

@font-face {
font-family: "FontAwesome";
src: url('../../font-awesome-4.2.0/font/fontawesome-webfont.eot');
src: url('../../font-awesome-4.2.0/font/fontawesome-webfont.eot?#iefix') format('eot');
src: url('../../font-awesome-4.2.0/font/fontawesome-webfont.woff') format('woff');
src: url('../../font-awesome-4.2.0/font/fontawesome-webfont.ttf') format('truetype');
src: url('../../font-awesome-4.2.0/font/fontawesome-webfont.svg#FontAwesome') format('svg');
font-weight: normal;
font-style: normal;
}

作为参考，文件夹结构现在是。

此解决方案完全解决了我的问题。