Integrating FontAwesome on watchkit

The aim of this post is integrating FontAwesome on watchkit extension target. Font Awesome gives you scalable vector icons. This font has many advantages. First, a would dare to say that you will find the icon that you were looking for in its catalog. Second, that if you do not need more than one color, instead of placing an image resource you will be placing a character. Could y0u  figure it out how much space are you saving up?. And third, that you will not have problem on scaling because it is a vector image.

The base project

For setup the base project just follow the instructions from a previous post. You have to add the 3 necessary files for integrating font awesome, at the end of this post you will find the link to the project on GitHub.

Integrating FontAwesome on watchkit

 

And be sure that NSString+FontAwesome.m file is ready for the following targets.

targetsase

 

For both targets, be sure that:

1. In project properties>watchkitFontAweSome extension>BuildPhases>Copy Bundle Resources is included FontAwesome.ttf.

addfonttotarge

 

2. Add the following key array in the Info.plist file:

Fonts provided by application > Item 0 String FontAwesome.ttf

infoplist

 

You could also edit the source code and add the following xml snippet:

 Repeat the two steps for the other target.

Let’s code

Add a text label in the storyboard where we will print some icon with the new font:

interfacecontro

 

Link the label to an IBOutlet in InterfaceController.m

iboutlet2

Add the following snippet for adding some text to the label:

In my case I have decided to put it on the willActivate method from InterfaceController.m. Basically what I am doing here is setting an attributed text, where fa-cloud-upload is the name of the icon that I am interested in showing. Finally, I am setting FontAwesome for the first character of the string, the rest of the string is presented with the default font.

Run the target extension.

targetextension

 

 

If you did not missed any step you should have to see the following in the simulator:

demofont

As you can see the fa-cloud-upload symbol has been shown at the beginning of the text. You can also download this project from Github.

4 thoughts on “Integrating FontAwesome on watchkit

  1. Pingback: Watch Out! « Under The Bridge

  2. Pingback: Apple Watch development: using custom font | watch.camp - a blog about Apple Watch

  3. I have been fascinated towards the cartoon art-work. Love your website. Extremely insightful. Will definitely follow you. Anticipating for information that is more excellent.

Leave a Reply

Your email address will not be published.