Skip to content

ElfSundae/IconFontKit

Repository files navigation

IconFontKit

Pod Version

IconFontKit provides a convenient toolkit to use icon fonts for iOS development.

Sample Explorer Selector

Installation

  • pod 'IconFontKit/Core' to install only the IFIcon abstract class.
  • pod 'IconFontKit' to install all icon packs.
  • pod 'IconFontKit/{Font Identifier}' to install certain of icon packs, e.g. pod 'IconFontKit/FontAwesome'.

Usage

  • An icon can be created by three ways: code like @"\uf179", type like IFFAApple, 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 with NSAttributedString, 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 of UIFont 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)];

Using Custom Icon Fonts

  • 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 is 0xf100.

  • 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

Built-in Icon Packs

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.

Credits

IconFontKit is inspired to FontAwesomeKit.

License

IconFontKit is available under the MIT license. See the LICENSE file for more info.

NOTICE: each icon font has it's own license agreement.