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:

I think you'll have to download the TTF and then maybe also need to embed it before you're able to use it. Have you tried that? — Gurtej Singh
I am rather new to Flex, and I am not quite sure to embed it and use it properly. — Ice Drake
Ok, I gave it a try and it seems to work. Please see my answer below and please let me know if it works for you. Thanks. — Gurtej Singh
Thanks for adding in your code and formatting it. Upvoted. I am still not able to reproduce your problem. I am trying with mx:Button now and I did get some warnings. Are you getting any warnings in your console? Can you please paste in a screenshot of your folder structure especially how your fonts and css are located in the project? Thanks. — Gurtej Singh
I updated the question with the folder structure. I don't think it is structuring issue as it will give me errors when I used a wrong indirect path. And no, I have no warning for this mxml. Everything is running fine especially when running the debug mode. I don't think you can reproduce the issue unless you tried running it as Flex 3. I know, for sure, it will work for Flex 4, which led me to the question of whether Font-Awesome is compatible or not for Flex 3. (Note that there is a warning for another unrelated mxml file under objects package.) — Ice Drake

Gurtej Singh Gurtej Singh · Accepted Answer · 2017-04-09T11:10:30

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.

Using Font Awesome in Adobe Flex 3

1 Answers