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

Question

我在 xpages.I 中使用 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;
 }

任何帮助将不胜感激。

当聚合更改为 "false" 时，它工作得很好，但是当它是 "true" 时它不需要 effect.here 是更改为 [ 后的图像结果和控制台=28=].

Answer 1

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

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

此外，它们肯定位于名为 "font" 的文件夹中吗？通常它们位于 Font Awesome 下载中名为 "fonts" 的文件夹中。

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

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

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

另请注意，很棒的字体带有“.css”文件和最小化版本“.min.css”，因此请务必根据需要更改这两个版本。

Answer 2

上述问题背后的真正原因是我在“.css”文件中给出的字体文件路径，这些文件位于字体目录中。

现在从头开始可以看到资源路径为"font-awesome-4.2.0/font-awesome-4.2.0/css/font-awesome.min.css"

的“.theme”文件代码

 <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 个文件夹，然后是字体 folder.So 我删除了一个文件夹，并将路径设置为这样 "font-awesome-4.2.0/css/font-awesome.min.css".

现在当我打开聚合时，字体文件夹的路径看起来像 this.This 对我有用。

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

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

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

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

font-awesome with xpages does not take effect even after loading

xpages

font-awesome