S

Icon Fonts & Vector Drawable in iOS apps

Samarth Singla

S

Agenda

•  What are Icon Fonts?

•  Benefits of using Icon Fonts

•  How to use Icon Fonts?

•  Convert SVG Files to TTF Format

•  Vector Images

•  How to use Vector Images?

What are Icon Fonts?

Icon fonts are just fonts, instead of containing letters or numbers, they contain symbols and icons.

We can use them in project the same way we use regular text font.

Why to use Icon Fonts?

S  Scalability: Font-based icons are resolution independent and can be scaled to any desired extent. The icons will look crisp regardless of retina, HDPI, XHDPI and so on

S  Size: Cut into the right proportion, an icon font has an incredibly smaller file size than a set of pixel images

S  Maintainability: Since the icons are going to be packaged into a single font file, there is only one file to maintain throughout the project

Contd..

S  Adoption: There are numerous free and professional tools that help to incorporate them easily

S  Flexibility: Any request to change color, size, or appearance can be made on the fly and tested by changing only a few lines of code

S  Interactivity: Icon fonts allow to show different states, apply effects and create animations with no effort at all.

How to use icon fonts?

S  Add .ttf files to project and add .ttf file name in plist file under “Fonts provided by application” key.

SVG to TTF files

S  FontForge tool can be used to convert the .svg files into .otf files

S  otf2ttf can be used to convert .otf to .ttf files

Vector Images

S  Vector images differ from bitmaps that are made of pixels

S  Vector images are made up of various “objects” S  Objects mean lines and shapes

S  Defined mathematically by a set of algorithms or formulas, which allow them to be redrawn over and over

S  They are crisp images, regardless of resolution or pixel ratio

S  They have smaller file size

References

S  https://www.innoq.com/en/blog/vector-assets-in-ios-xcode/

S  http://www.hiland.com/knowledge-base/bitmap-and-vector-images-understanding-the-difference/

S  http://www.creativebloq.com/app-design/icon-fonts-in-apps-21410734

S  https://www.nativescript.org/blog/details/mobile-app-best-practices---use-font-instead-of-image-to-show-an-icon

Thanks