在Adobe Flex 3中使用Font Awesome

Question

是否可以在Adobe Flex 3中使用Font Awesome圖標，因為它不允許內聯CSS樣式？ 如果是這樣，如何設置Button或Label的文本在Flex中正確顯示為圖標？

目前，我對Flex 3.6A進行了以下設置，並且該按鈕未正確顯示圖標：

這是放置在組件包中的... View.mxml的簡化版本：

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
       currentState="default">
<mx:Style source="../assets/styles.css"/>
<mx:states>
    <mx:State name="Hide"/>
    <mx:State name="default">
        <mx:AddChild>
            <mx:HBox>
                <mx:Button label="&#xf011;" styleName="complete" id="completeButton" fontFamily="FontAwesome"/>
                <mx:Button id="skipButton" />
                <mx:Button id="shareButton" />
                <mx:Button id="deleteButton" />
                <mx:Button id="progressButton" />
            </mx:HBox>
        </mx:AddChild>
    </mx:State>
    <mx:State name="Expand"/>
</mx:states>    
</mx:Canvas>

這是styles.css的內容：

@font-face {
    fontFamily:             FontAwesome;
    embed-as-cff:           true;
    src:                    url("font-awesome-4.7.0/fonts/fontawesome-webfont.ttf");
    fontStyle:              normal;
}
@font-face {
    fontFamily:             FontAwesomeNonCff;
    embed-as-cff:           false;
    src:                    url("font-awesome-4.7.0/fonts/FontAwesome.otf");
    fontStyle:              normal;
}

.complete {
    font-family: FontAwesome;
    color: red;
}

這是按鈕的樣子：

Answer 1

所以我只是嘗試了一下它似乎工作。 請按照以下步驟在Flex中使用font-awesome字體。

首先從font-awesome網站下載.ttf字體。 接下來，將.ttf文件導入Flex應用程序，最好是在包中。 我創建了一個名為assets/fonts的軟件包，但是完全取決於你將它保存在項目中的位置。

完成后，創建一個樣式表，我將其稱為styles.css在您選擇的任何包中。 我在一個名為assets/css的包中創建了它。 在樣式表中創建字體樣式：

@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

@font-face 
{
    src:url("assets/fonts/fontawesome-webfont.ttf");
    fontFamily: fontawesome;
}

.buttons
{
    fontFamily:fontawesome;
    fontSize:20;
    color:#000000;
}

我還創建了一個名為buttons的選擇器類，用於按鈕。 注意字體文件的路徑，並確保它與您保留的文件夾結構相匹配。 另外，請注意我在buttons CSS選擇器中使用fontFamily作為fontawesome 。

接下來，將您的CSS導入flex項目並使用按鈕中的樣式名稱：

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx">
    <fx:Style source="assets/css/styles.css"/>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <s:Button width="100" height="40" top="50" left="50" label="&#xf2bb;" styleName="buttons"/>
</s:WindowedApplication> 

這里要注意的重點是按鈕的label屬性。 您必須將Unicode值用於font-awesome cheatsheet中圖標旁邊的圖標。

一旦運行代碼，您應該能夠看到按鈕中出現的字體。 下面附上截圖供您參考。

PS：我使用的是Flex 4.x，因此您可能需要進行一些代碼調整，但基本概念應該保持不變。

更新 ：對於Flex 3.6A，請確保將fontWeight:normal的屬性添加到CSS選擇器以使其工作。 這很奇怪，但沒有它，它似乎不起作用。 所以CSS將是：

.buttons
{
    fontFamily:fontawesome;
    fontSize:20;
    fontWeight:normal;
    color:#000000;
}

希望這可以幫助。 干杯。