在 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 的包，但这完全取决于您将其保存在项目中的位置。

完成后，创建样式 sheet，我在您选择的任何包中将其命名为 styles.css。我在一个名为 assets/css 的包中创建了它。在 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;
}

我还创建了一个名为 buttons 的选择器 class 以用于您的按钮。注意字体文件的路径，并确保它与保存它的文件夹结构相匹配。另外，请注意我在 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 值来找到字体超棒 cheatsheet 中图标旁边的图标。

一旦你运行你的代码你应该能够看到按钮中出现的字体。下面附上屏幕截图供您参考。

PS: 我使用的是 Flex 4.x，因此您可能需要对代码进行一些调整，但基本概念应该保持不变。

更新：对于 Flex 3.6A，请确保将 fontWeight:normal 的属性添加到 CSS 选择器以使其工作。这很奇怪，但没有它，它似乎不起作用。所以 CSS 将是：

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

希望这对您有所帮助。干杯。

在 Adobe Flex 3 中使用 Font Awesome

Using Font Awesome in Adobe Flex 3

css

mxml

flex3

actionscript-3

font-awesome

在 Adob​​e Flex 3 中使用 Font Awesome

Using Font Awesome in Adobe Flex 3

css

mxml

flex3

actionscript-3

font-awesome

在 Adobe Flex 3 中使用 Font Awesome