Twitter bootstrap XPages Bootstrap 3.1.1和Font Aowesome 4.1.0组合在一个主题中不起作用

我将bootstrap和font-awesome文件添加到我的WebContent文件夹中，并按照建议修改了font-awesome.css文件中的URL

然后我创建了一个bootstrap主题，其中包含所有必需的bootstrap文件.css、.js、jquery和font-awesome.css文件

但是，当我尝试使用一个带有类fa图标名的字体awesome图标I-tag时，该图标并没有呈现在IE8/9和Firefox 30中

当我停用主题并将字体awesome.css文件作为资源直接添加到我的Xpage时，它就可以工作了

这个问题可能是由我在主题中提取不同文件的顺序引起的吗

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

<resources>
    <metaData>
        <name>viewport</name>
        <content>width=device-width, initial-scale=1.0</content>
    </metaData>
</resources>

<!-- font awesome -->
    <resource>
        <content-type>text/css</content-type>
        <href>font-awesome/css/font-awesome.css</href>
    </resource>

<!-- bootstrap -->
    <!-- bootstrap js -->
    <resource>
        <content-type>application/x-javascript</content-type>
        <href>bootstrap/js/bootstrap.min.js</href>
    </resource>

    <!-- bootstrap css-->
    <resource>
        <content-type>text/css</content-type>
        <href>bootstrap/css/bootstrap.min.css</href>
    </resource>

<!-- jquery -->
<resource>
    <content-type>application/x-javascript</content-type>
    <href>jquery/jquery-1.11.1.min.js</href>
</resource>

<!-- Add default style classes to buttons and fields -->
    <!-- Button -->
    <control>
        <name>Button.Command</name>
        <property mode="concat">
            <name>styleClass</name>
            <value>btn</value>
        </property>
    </control>

    <!-- Fields -->
    <control>
        <name>ComboBox</name>
        <property mode="concat">
            <name>styleClass</name>
            <value>form-control</value>
        </property>
        <property mode="override">
            <name>showReadonlyAsDisabled</name>
            <value>#{true}</value>
        </property>
    </control>

    <control>
        <name>InputField.EdtiBox</name>
        <property mode="concat">
            <name>styleClass</name>
            <value>form-control</value>
        </property>
        <property mode="override">
            <name>showReadonlyAsDisabled</name>
            <value>#{true}</value>
        </property>
    </control>

    <control>
        <name>InputField.TextArea</name>
        <property mode="concat">
            <name>styleClass</name>
            <value>form-control</value>
        </property>
        <property mode="override">
            <name>showReadonlyAsDisabled</name>
            <value>#{true}</value>
        </property>
    </control>
</theme>

任何帮助都将不胜感激

多谢各位

---

Daniel

您是否打开了资源聚合？那可能会破坏东西。我知道这对我来说太棒了，请看我的评论

我不得不从font-awome.min.css中删除@font-face部分。然后我创建了一个单独的CSS，名为font-awome-fontFamily.CSS，内容如下：

@font-face{font-family:'FontAwesome';src:url('../../../css/font-awesome/fonts/fontawesome-webfont.eot?v=4.0.3');src:url('../../../css/font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'),url('../../../css/font-awesome/fonts/fontawesome-webfont.woff') format('woff'),url('../../../css/font-awesome/fonts/fontawesome-webfont.ttf') format('truetype'),url('../../../css/font-awesome/fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');

然后，我在主题中添加了以下内容：

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

<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>/css/font-awesome/css/font-awesome.min.css</href>
</resource>

因此，如果打开了资源聚合，则加载min.css和font-awesome-fontfamine.css，否则只加载font-awesome.css

---

我有一种感觉，字体真棒的版本在IE8上不起作用。我在IE8中遇到了4.0.3的问题，但这可能只是因为应用程序处于兼容模式。

你好，保罗，非常感谢您的回复。资源聚合是指使用运行时优化的JavaScript和CSS资源，对吗？是的，已经打开了。然后问题是，如果我将字体awesome.css文件作为资源添加到XPage或自定义控件，为什么它可以工作？我还尝试在我的主题中使用bootstrap，并将字体awesome作为资源添加到我的XPage中，但也不起作用。字体本身就很好用。不过，我会尝试一下你的建议，谢谢你。阿加尼还发现Domino在font Aweasome CSS文件中的URL语法有问题：它不喜欢FontAweasome webfont.eot？v=4.1.0这样的语法。修复方法是替换那个。马克，您好，非常感谢您的回复。是的，我确实更改了两个字体awesome.css文件中的URL。似乎只有通过主题添加CSS和JS，资源聚合才会把事情搞砸。我得出这一结论的原因是，当我将CSS作为资源直接添加到XPage或自定义控件时，它可以工作。