Using the icon font in iOS

In the development of the Ali data iOS client, because the project progress is very tight, all the icons in the project is the most common background picture scheme to achieve. In order to be compatible with the device of normal screen and retina screen, Apple requires each background map to be saved in two sizes (a.png and [email protected]), which adds cost to the designers because they have two background icons each time.

Now in web development, the application of icon font technology is very wide, it not only in the resolution of multi-resolution display problem is very effective, but also in the use of it can reduce a lot of design and development costs.

So can it be applied to iOS development? With this in my question, I found fontasticicons and ios-fontawesome on GitHub, but these two OC packages are limited to the icon resource package, and the extension is not very convenient.

Now that you can use the icon font on iOS, how do you use it? After some groping, found that the use of the principle and custom fonts almost, only the individual operation is not the same, then I give you a detailed introduction.

How to use a custom font

Before you speak the icon font, first look at how normal custom fonts are used in iOS, and the two principles are the same. Here take Kaushanscript-regular as an example:

Step 1: Import font files

Drag a font file into the project (iOS supports font formats:. TTF,. OTF, other formats are not determined):

Then, in the project's resource pool, confirm that the font files are joined to the project, open the Xcode project in build phases to view:

Step 2: Configure the. plist file

Registering the newly added font in the. plist file, the. plist file often exists in the supporting files folder in the form of "[appname]-info.plist". Add a new property in the. plist file "Fonts provided by Application", the value of this property is an array, which means that you can register multiple fonts here.

Step 3: Find the Font set name

After registering, we need to detect whether the registration is successful and obtain a new font name, the detection method is to print out all the installed fonts, to see if the newly registered fonts are inside:

For (nsstring* family in [Uifont Familynames]) {    NSLog (@ "%@", family);    For (nsstring* name in [Uifont fontnamesforfamilyname:family])    {        NSLog (@ "%@", name);}    }

After running, see if there are any newly registered fonts in all the font sets printed in the console, if so, the registration is successful, and the font name (here is "Kaushan Script"), remember to leave it behind.

Step 4: Use new fonts

Finally, you'll be using the latest fonts you've added:

UILabel *label = [[UILabel alloc] Initwithframe:cgrectmake (Ten, $, +)];label.font = [Uifont fontwithname:@ "Kaushan S Cript "Size:35];label.text = @" icon font "; Label.textcolor = Uicolorfromrgb (0xff7300); [Self.view Addsubview:label];

Effect:

Start using icon font

The font of the icon is also the font, using the same way as above, just a few differences in the application; Take Fontello's icon font library for example.

1. Select the desired icon

In the Fontello icon Font Library, select the icon you want and download the generated font file.

2. Follow the steps above to register the icon font in the Project 3. Find the Unicode code corresponding to the icon

Using the FontLab Studio 5 tool to open a font file (such as Fontello.ttf), you can see the correspondence between the icon and the Unicode code.

4. Use the icon

UILabel *label = [[UILabel alloc] Initwithframe:cgrectmake (Ten, $, +)];label.font = [Uifont fontwithname:@] Fontello "Size:35];label.text = @" \u0000e802 \u0000e801 \u0000e803 \u0000e804 \u0000e805 \u0000e81a "; label.textColor = Uicolorfromrgb (0xff7300); [Self.view Addsubview:label];

In Objective-c, the custom Unicode code needs to exist in a format such as "\u0000e802".

5. Use Emoji Emoticons Library

You can also use the Apple Emoji Expression Library icon, here do not need a new font library, as long as the emoji icon and Unicode to find the corresponding relationship between the good, but these icons are not vectors, scaling please self-esteem.

UILabel *label5 = [[UILabel alloc] Initwithframe:cgrectmake (Ten, 480, +)];label5.text = @ "\u0000e42a\u0000e525\ U0000e41c "; [Self.view Addsubview:label5];

6. Effects

7. Use the homemade icon font

If the icon library described above does not meet your needs, or if the desired icon is distributed across multiple icon libraries and cannot be centralized into a single font file, then you may need to make an icon font file yourself.

Summarize

In this way, in iOS development, not only can go directly to open-source icon library to find ready-made icons used in the project, but also can easily change the color of the icon, size, I believe that can liberate a lot of designers and engineers work.

On the Code

• Demo

Icon Font Library

• Fontello
• Etao Icon Font Library (here is a question to note that the Etao icon font named "Untitled1", is not the generation of the font of the classmate negligence? ）
• Icomoon
• Emoji Expression Gallery

Transfer from http://ued.taobao.org/blog/2013/09/icon-font-in-ios/

Using the icon font in iOS