Question

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

然后我创建了一个引导主题，它引入了所有必需的引导文件（.css，.js），jquery和font-awesome .css文件。

但是，当我尝试使用font-awesome图标（带有fa fa-icon-name的i-tag）时，图标不会被渲染（IE8 / 9和Firefox 30）。

当我停用主题并将font-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>

任何帮助都将受到高度赞赏。

谢谢。

丹尼尔

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的问题，但这可能只是因为应用程序处于兼容模式。

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

1 个答案: