XPages Bootstrap 3.1.1 和 Font-Awesome 4.1.0 组合在一个主题中不起作用

Question

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

然后我创建了一个引导程序主题，它引入了所有必需的引导程序文件（.css、.js）、jquery 和字体很棒的 .css 文件。

但是，当我尝试使用 font-awesome 图标（带有类 fa fa-icon-name 的 i-tag）时，该图标没有被呈现（IE8/9 和 Firefox 30）。

当我停用主题并将字体很棒的 .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>

任何帮助将不胜感激。

谢谢。

丹尼尔

Answer 1

您是否开启了资源聚合？那可能会破坏事情。我知道它对我来说是 Font Awesome，请在此处查看我的评论 http://xpagetips.blogspot.co.uk/2013/08/five-minutes-to-font-awesome-icons.html

我不得不从 font-awesome.min.css 中删除 @font-face 部分。然后我创建了一个单独的 CSS，名为 font-awesome-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-fontFamily.css，否则只会加载 font-awesome.css。

我感觉 Font Awesome 版本不能在 IE8 上运行。我在 IE8 中遇到了 4.0.3 的问题，但这可能只是因为应用程序处于兼容模式。