Speedup your iOS app development using icon fonts!
Icon fonts are very popular in the web development world. And they are awesome. With Stencils you can now access the power and awesomeness of icon fonts in the development of your iOS app, and save a lot of emails with the designer to get the new asset with the shadow 0.5 point more to the left and 3.141592% less opaque.
pod 'Stencils', ~> 'x.x.x'
Three simple steps:
Just add the
.ttf to the project. No
Info.plist update needed! And you can even add multiple icon fonts.
Stencils needs to know how to read the font file. Create a configuration file, by default Stencils will look for
Stencils.plist, in this fashion:
font-icons Array Item 0 Dictionary font-name String The name of the font where the icon is located icon-name String The name to use to load the icon icon-code String The unicode caracter corresponding to the icon i.e: e001 baseline-adjustement Number (Optional) A correction value to compensate eventual offset from the baseline scale-adjustement Number (Optional) A correction value to change the scale of the icon. Usually used with "baseline-adjustement"
Have a look at the example projects to see how a real configurations
plist looks like.
@"arrow-left" withSide:60.0f];STIconsFactory *factory = [[STIconsFactory alloc] init]; STIconView *arrow = [factory iconViewForIconNamed:
You can customize your icon like this:
arrow.backgroundColor = [UIColor whiteColor]; arrow.color = [UIColor blackColor]; // If no color is set the icon will use the tintColor of its superview arrow.shadowColor = [UIColor grayColor]; arrow.shadowOffset = CGSizeMake(1.0f, 1.0f);
It can happen that the icons are rendered cropped. This is due to the original font metrics not being as iOS would like them.
scale-adjustement are there to compensate this issue.
To help you fine tune those values there's the IconSettings app from this repo. You can load your raw
.plist, launch it on a device, tune each icon, then email yourself the tuned
.plist. It's a rather sub-optimal approach, but... it works.
Use the experimental
plist_generator.rb script located in the
Scripts folder to generate the
Stencils.plist to import together with the
.ttf font in your app from the
.css that you would use for the webfont.