Using this library you can easily embed and use Font Icons into your Actionscript 3 projects.
Right now we support the following icon fonts:
- Font Awesome
- Iconic (both fill and stroke versions)
- Entypo
- Copy the com directory in your project root directory.
- Get the font files of the fonts you want to use in the assets directory in your project root.
Import the class of the font you want to use:
import com.ficon.FontAwesome;
// or import com.ficon.IconicFill;Create a trophy icon:
var trophy:DisplayObject = FontAwesome.trophy();Add the icon to the stage:
addChild(trophy);Size and position it to your wishes:
trophy.y = 100;
trophy.width = 100;It will still be rendered super-sharp since the icons are vector-based.
You can pass in options like so:
addChild(IconicStroke.camera({color: 0xFFFF00, fontSize:12}));The options are set directly on the ElementFormat instance used. Check out the documentation for a list of possible settings.
The returned object is a FiconSprite, a descendant of Sprite. FiconSprite keeps the proportional width and height of the icon locked, so you cannot distort it. If you'd like to set width and height independently, set proportionalScaling to false:
trophy.width = 50;
trophy.height = 50;
trace(trophy.width); // Will return something like '30'
trophy.proportionalScaling = false;
trophy.width = 50;
trace(trophy.width, trophy.height) // Will return '50, 50'Embedded fonts are usually quite large, so to minimize wasted space Ficon includes a handy feature to check what glyphs you're actually using. This way you can easily specify to only embed those, reducing filesize dramatically.
Every time you create an icon, Ficon outputs the updated unicodeRange to the console using trace, for every font you're using:
FontAwesome unicodeRange="U+f091,U+f002,U+f032,"
This includes all the glyphs you've used in Ficon. Just replace the unicodeRange in the file where the font is embedded, e.g. /com/ficon/FontAwesome.as with the generated one.
You can turn this off by setting Ficon.debug = false.
We're using the Flash Text Engine (FTE) instead of regular TextFields to render the icons because this allows us to embed the fonts using CFF (embedAsCFF=true) which results in a 30% filesize reduction.
FiconSprite contains one child, a TextLine containing the glyph. Returning the TextLine object directly would be annoying if you wanted to position the element, since it calculates y using the text baseline instead of the point of the highest character, as you'd intuitively expect. IconSprite makes sure that positioning and sizing happens intuitively. If you'd like access to the TextLine, you can always get the first child of the returned FiconSprite object.
These are based on the change in filesize of a SWF compiled with debugging off, with all the glyphs included. The overhead of the .as file is calculated by removing all but one of the icon creation functions.
- FontAwesome.as overhead: 4KB (4338 bytes)
- Font size embedded as CFF: 36KB (36043 bytes)
- Font size embedded as normal: 52KB (52058 bytes)
Total max overhead: 40KB (40381 bytes).
- IconicFill.as overhead: 3KB (3235 bytes)
- Font size: 10KB (10308 bytes)
Total max overhead: 13KB (13543 bytes)
- IconicStroke.as overhead: 3KB (3175 bytes)
- Font size: 10KB (10740 bytes)
Total max overhead: 13KB (13815 bytes)
- Entypo.as overhead: 2.5KB (2451 bytes)
- Font size: 14KB (14017 bytes)
Total max overhead: 16.5KB (16468 bytes)
- Check and use the JSON files of Iconic
This library contains some files of the following fonts. Thanks to their respective authors for providing their awesome work for free use!
Font Awesome by Davy Gandy, licensed under the CC BY 3.0.
Iconic by P.J. Onori, licensed under the CC BY-SA 3.0.
Entypo by Daniel Bruce, licensed under the CC BY-SA 3.0.