IconFontKit provides a convenient toolkit to use icon fonts for iOS development.
pod 'IconFontKit/Core'
to install only theIFIcon
abstract class.pod 'IconFontKit'
to install all icon packs.pod 'IconFontKit/{Font Identifier}'
to install certain of icon packs, e.g.pod 'IconFontKit/FontAwesome'
.
-
An icon can be created by three ways: code like
@"\uf179"
, type likeIFFAApple
, identifier like@"fa-apple"
.
The code and type way are recommended.IFFontAwesome *faIcon = [IFFontAwesome iconWithCode:@"\uf17b" fontSize:20.0]; IFIonicons *ionIcon = [IFFontAwesome iconWithType:IFIIWifi fontSize:20.0]; IFOcticons *octIcon = [IFOcticons iconWithIdentifier:@"octicon-gift" fontSize:20.0];
-
IFIcon
are backend withNSAttributedString
, and there are several methods for accessing attributes, like:- (NSDictionary *)attributes; - (void)addAttribute:(NSString *)name value:(id)value; - (void)removeAttribute:(NSString *)name; - (void)setAttributes:(NSDictionary *)attributes;
-
You may create an icon image using
-[IFxxxIcon imageWithSize:]
or+[IFxxxIcon imageWithType:color:...]
etc.UIImage *image = [IFFontAwesome imageWithType:IFOIArrowRight color:nil imageSize:CGSizeMake(30, 30)];
-
Use
+[IFxxxIcon fontWithSize:]
to get an icon font instance ofUIFont
type. -
[UIImage if_imageWithStackedIcons:imageSize:]
can stack multi-icons to one image./** * Draws the IFIcons on an image. * These icons will be centered horizontally and vertically by default. * You can set the `drawingPositionAdjustment` property to adjust drawing offset for each icon. * * @param icons The icons to be drawn. The first icon will be drawn on the bottom and the last icon will be drawn on the top. * @param imageSize Height and width for the generated image. * * @return An image with the icons. */ + (UIImage *)if_imageWithStackedIcons:(NSArray <IFIcon *>*)icons imageSize:(CGSize)imageSize;
For example:
IFFontAwesome *container = [IFFontAwesome iconWithType:IFFASquareO fontSize:100.0 color:[UIColor colorWithWhite:0.88 alpha:1.0]]; container.drawingPositionAdjustment = UIOffsetMake(0, 4); IFFontAwesome *forbidden = [IFFontAwesome iconWithType:IFFABan fontSize:70.0 color:[[UIColor redColor] colorWithAlphaComponent:0.6]]; IFFontAwesome *usbIcon = [IFFontAwesome iconWithType:IFFAUsb fontSize:50]; UIImage *stackedImage = [UIImage if_imageWithStackedIcons:@[container, usbIcon, forbidden] imageSize:CGSizeMake(100, 100)];
-
To use your own icon fonts, just subclass
IFIcon
and implement+ (NSURL *)fontFileURL
method. -
If the font name is not the same as the filename of
fontFileURL
, you need to implement+ (NSString *)fontName
method as well. -
If you want to use identifier way to create icons, you need to implement
+ (NSDictionary *)allIcons
method as well. -
Icon types of your custom fonts are the icon's unicode hexadecimal value. e.g. icon code
\uf100
's type is0xf100
. -
FYI: You can generate icon fonts using IcoMoon app, Fontello, Fontastic or other awesome services.
-
See "IconFontKitExample/MyFontIcons" for demo.
// MyFontIcons.h #import <IconFontKit/IFIcon.h> typedef NS_ENUM(IFIconType, MyFontIconsType) { MFFacebookSquared = 0xa100, MFChat = 0xa101, MFEmoHappy = 0xa102, MFThumbsUp = 0xa103, MFThumbsUpAlt = 0xa104, MFLinkExt = 0xa105, MFVolumeUp = 0xa106, MFCogAlt = 0xa107, MFCode = 0xa108, }; @interface MyFontIcons : IFIcon @end
// MyFontIcons.m #import "MyFontIcons.h" @implementation MyFontIcons + (NSURL *)fontFileURL { return [[[NSBundle mainBundle] resourceURL] URLByAppendingPathComponent:@"myfonticons.ttf"]; } // Optional becase the font name is the same as the filename of font. //+ (NSString *)fontName { // return @"myfonticons"; //} + (NSDictionary *)allIcons { return @{ @"facebook-squared": @"\ua100", @"chat": @"\ua101", @"emo-happy": @"\ua102", @"thumbs-up": @"\ua103", @"thumbs-up-alt": @"\ua104", @"link-ext": @"\ua105", @"volume-up": @"\ua106", @"cog-alt": @"\ua107", @"code": @"\ua108", }; } @end
Font Identifier | Version | Icons Number | Font Size | License | Description |
---|---|---|---|---|---|
FontAwesome | 4.7.0 | 675 | 135 KB | SIL OFL 1.1 | Font Awesome |
Octicons | 4.3.0 | 172 | 45 KB | SIL OFL 1.1 | GitHub's icons |
FoundationIcons | 3.0 | 283 | 57 KB | ? | Foundation Icon Fonts 3 |
Ionicons | 2.0.1 | 733 | 189 KB | MIT | The premium icon font for Ionic Framework. |
MaterialDesignIcons | 1.6.50 | 1650 | 236 KB | SIL OFL 1.1 | Material Design Icons |
ElusiveIcons | 2.0.0 | 304 | 80 KB | SIL OFL 1.1 | Elusive Icons |
MaterialIcons | 2.2.3 | 932 | 128 KB | CC-BY 4.0 | Made by Google for Material design. |
ZocialButtons | 1.2.0 | 102 | 26 KB | MIT | Social buttons |
Typicons | 2.0.7 | 336 | 100 KB | SIL OFL 1.1 | |
OpenIconic | 1.1.1 | 223 | 28 KB | SIL OFL 1.1 | The open source sibling of Iconic. |
MetrizeIcons | 1.0 | 300 | 63 KB | Free to use | Metro-Style Icons |
Meteocons | 1.0 | 47 | 18 KB | Free to use | A set of weather icons |
MFGLabsIconset | 1.0 | 186 | 56 KB | SIL OFL 1.1 | MFG Labs iconset |
LineariconsFree | 1.0.0 | 170 | 56 KB | CC BY-SA 4.0 | Linearicons Free Version |
IcoMoonFree | 1.0.0 | 491 | 95 KB | CC BY 4.0 or GPL | IcoMoon Free Pack |
HawconsFilled | 1.0 | 517 | 107 KB | Free to use | Hawcons filled style, includes icons of Documents, Sports, Weather, Emoji, Gestures, Filetypes, etc. |
HawconsStroke | 1.0 | 518 | 138 KB | Free to use | Hawcons stroke style, includes icons of Documents, Sports, Weather, Emoji, Gestures, Filetypes, etc. |
Dashicons | 3.8 | 234 | 42 KB | GPLv2 | Dashicons is the official icon font of the WordPress admin. |
Linea | 1.0 | 716 | 125 KB | CCBY | A free outline iconset designed by Dario Ferrando. |
Entypo | 1.0 | 411 | 76 KB | CC BY-SA 4.0 | Entypo+ is the third version of a free suite of premium quality pictograms. |
ThemifyIcons | 1.0 | 352 | 79 KB | Free to use | Handcrafted icons that draw inspiration from Apple iOS 7. |
StreamlineFree | v2 | 100 | 38 KB | License | Streamline Free Pack, free iOS 8 vector icons |
Stroke7Icons | 1.2 | 202 | 58 KB | Free to use | A series of iOS 7 inspired thin stroke icons from Pixeden |
Devicons | 1.8.0 | 171 | 147 KB | MIT | An iconic font for developers. |
LigatureSymbols | 2.11 | 239 | 84 KB | SIL OFL 1.1 | Ligature Symbols by Kazuyuki Motoyama |
Dripicons | 1.0 | 95 | 21 KB | Free to use | A completely free, vector line-icon font by Amit Jakhu. |
OpenWebIcons | 1.4.0 | 97 | 40 KB | SIL OFL 1.1 | OpenWeb Icons |
Genericons | 3.4.1 | 147 | 22 KB | GPLv2 | Designed to be clean and simple keeping with a generic aesthetic. |
MapIcons | 3.0.0 | 175 | 48 KB | SIL OFL 1.1 | An icon font for use with Google Maps. |
WeatherIcons | 2.0.10 | 219 | 100 KB | SIL OFL 1.1 | weather, maritime, and meteorological based icons |
EvilIcons | 1.8.0 | 70 | 15 KB | MIT | Simple and clean SVG icon pack with the code to support Rails, Sprockets, Node.js, Gulp, Grunt and CDN. |
IconFontKit is inspired to FontAwesomeKit.
IconFontKit is available under the MIT license. See the LICENSE file for more info.
NOTICE: each icon font has it's own license agreement.