Using Font Awesome in Adobe Flex 3

Question

Is it possible to use Font Awesome icons in Adobe Flex 3 since it doesn't allow inline CSS style? If so, how to set the text of Button or Label to properly be shown as icon in Flex?

Currently, I have the following setup for Flex 3.6A and the button isn't showing the icon properly:

Here is the simplify version of ...View.mxml placed in components package:

<?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>

Here is the content of 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;
}

Here is what the button looks like:

Answer 1

So I just gave this a try and it seems to work. Please follow these steps to use font-awesome font in Flex.

First of all download the .ttf font from the font-awesome website. Next, import the .ttf file into your Flex application preferably inside a package. I created a package called as assets/fonts, but it's totally upto you where you keep it in your project.

Once done, create a style sheet, I called it styles.css in any package of your choice. I created it in a package named assets/css. Create your font-face style in the style sheet:

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

I also created a selector class named as buttons to be used on your buttons. Notice the path of the font file and make sure it matches your folder structure where it's kept. Also, notice that I am using the fontFamily as fontawesome in the buttons CSS selector.

Next, import your css into the flex project and use the style name in your buttons:

<?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> 

Important thing to note here is the label property of the button. You have to use the Unicode value for the icon found next to the icon in the font-awesome cheatsheet.

And once you run your code you should be able to see the font appearing in the button. Attached screenshot below for your reference.

PS: I am using Flex 4.x, so you may have to make some code adjustments, but the basic concept should remain the same.

UPDATE: For Flex 3.6A, make sure that you are adding the attribute of fontWeight:normal to your CSS selector to make it work. It's strange, but without it, it does not seem to work. So CSS would be:

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

Hope this helps. Cheers.