A good hand-writing always deserves good marks for better showcasing of content. Likewise, an app that uses a font like font awesome makes a happy user by providing great iconic text. Not only that, it reduces the number of images has to use in our app. Having too many images for icons (like masked-eye, key, right arrow, camera, user icon etc.,) increases app size, and the images go blur on larger devices. Does that mean we can avoid these problems?. The great yes here. We are not going to have this kind of problems anymore when using font awesome.
Please be remember that this tutorial shows using of font awesome. But for any other custom fonts using in iOS application follows the same process.
We are using XCode 8.3 and Swift 3.0. This tutorial covers using of font awesome in two different ways. One is through visual storyboard and the second is writing programmatically (either objective C or Swift).
Adding & configuring font-awesome file
To use any custom font in our application, we need to get it downloaded and copied to our project. Go and click on this link to download font awesome. After downloading, go to the fonts folder and find the fontawesome-webfont.ttf file. Now it’s time to create a new project in Xcode with Single-View-Application template. Copy & paste the font-awesome file we have downloaded in the previous step to our newly created Xcode project. Go to build phases and check if this font file added in ‘Copy Bundle Resources’ section or not. While archiving the application, it copies this font file also if it is added to copy bundle resources section.
The last step in configuring the font file in our application is adding an entry in the .plist file. Go to the plist file and add a new entry with key ‘Fonts provided by application’ and value as an array of custom fonts. Add ‘fontawesome-webfont.ttf’ as value for item 0.
Editing in storyboard
The very easy way to add a font to any text on a label, button or anywhere is using storyboard. The visual storyboard has attribute inspector which gives the flexibility to add a font. If your configuration goes well from above step, you will be able to see your newly added font-awesome in the list of custom fonts in the storyboard.
The text we use here showing ‘question mark’. This special character we copy from font-awesome cheatsheet. Here the list shows set of icons and it’s names. Copy the icon and paste in storyboard text. Even though it shows as question mark here. While running the application, it shows the real icon. That much simple. 😉
As adding & configuring font to our project looks like tricky, all other steps are very easy. Now adding font icon is very easy using below lines. Assuming you added font awesome in your storyboard, giving an icon to label can be done with below line of code.
Here, unichar 0xf113 we got from cheatsheet. Identify the icon unichar from cheatsheet and use it in a string format here. Now run the project. By this time you will be ready to see the output font-awesome icon. If something goes wrong, please go and follow the above steps again.
Apple allows you to use any custom font. Fonts like font-awesome give a great set of icons to use. Instead of using hell number of images in your applications for icons and making application larger and larger, we can use font awesome and reduce images usage. Upon running on larger devices, the font text won’t get blurred as an image do. So whenever it’s required, it’s advised to use custom fonts to make your application content looks cleaner.