Using the icon font in iOS

<span id="Label3"></p><span style="font-size: 14px; line-height: 21px;"><span style="font-size: 14px; line-height: 21px;">blog post to http://www.cocoachina.com/industry/20131111/7327.html</span></span><p class="p1"><p class="p1">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</p></p><span class="pun pun1"><span class="pun pun1">"<span class="pun pun2">"</span> </span></span>Reading device<p><p>Icon Font IOS</p></p>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.<strong><strong>How to use a custom font</strong></strong>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:<strong><strong>Step 1: Import font Files</strong></strong>Drag a font file into the project (ios supported font formats Are:. ttf,. otf, Other formats indeterminate): 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:<strong><strong>Step 2: Configure the. plist file</strong></strong>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.<strong><strong>Step 3: Find the font set name</strong></strong>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: <ol class="dp-c"> <ol class="dp-c"> <li class="alt"><span class="keyword">For (nsstring* family in <span class="keyword">[uifont familynames])</span></span></li> <li>{</li> <li class="alt">NSLog (@<span class="string">"%@", family);</span></li> <li>for <span class="keyword">(nsstring* name in <span class="keyword">[uifont fontnamesforfamilyname:family])</span> </span></li> <li class="alt">{</li> <li>NSLog (@<span class="string">"%@", name);</span></li> <li class="alt">}</li> <li>}</li> </ol> </ol>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.<strong><strong>Step 4: Use new fonts</strong></strong>finally, you'll be using the latest fonts you've added: <ol class="dp-c"> <ol class="dp-c"> <li class="alt">UILabel *label = [[UILabel alloc] initwithframe:cgrectmake (10, 60, 300, 50)];</li> <li>Label.font = [uifont fontwithname:@<span class="string">"kaushan Script" size:35];</span></li> <li class="alt">Label.text = @<span class="string">"icon font";</span></li> <li>Label.textcolor = Uicolorfromrgb (0xff7300);</li> <li class="alt">[self.view addsubview:label];</li> </ol> </ol>Effect:<strong><strong>start using icon font</strong></strong>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.<strong><strong>1. Select the desired icon</strong></strong>In the Fontello icon font library, Select the icon you want and download the generated font file.<strong><strong>2. Follow the steps above to register the icon font in the project</strong></strong><strong><strong>3. Find the Unicode code corresponding to the icon</strong></strong>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.<strong><strong>4. Use the icon</strong></strong> <ol class="dp-c"> <ol class="dp-c"> <li class="alt">UILabel *label = [[UILabel alloc] initwithframe:cgrectmake (10, 60, 300, 50)];</li> <li>Label.font = [uifont fontwithname:@<span class="string">"fontello" size:35];</span></li> <li class="alt">Label.text = @<span class="string">"\u0000e802 \u0000e801 \u0000e803 \u0000e804 \u0000e805 \u0000e81a";</span></li> <li>Label.textcolor = Uicolorfromrgb (0xff7300);</li> <li class="alt">[self.view addsubview:label];</li> </ol> </ol>In objective-c, the custom Unicode code needs to exist in a format such as "\u0000e802".<strong><strong>5. Use Emoji Emoticons library</strong></strong>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. <ol class="dp-c"> <ol class="dp-c"> <li class="alt">UILabel *label5 = [[UILabel alloc] initwithframe:cgrectmake (10, 480, 300, 50)];</li> <li>Label5.text = @<span class="string">"\u0000e42a\u0000e525\u0000e41c";</span></li> <li class="alt">[self.view addsubview:label5];</li> </ol> </ol><strong><strong>6. Effects</strong></strong><strong><strong>7. Use the homemade icon font</strong></strong>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.<strong><strong>Summary</strong></strong>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.<strong><strong>on the Code</strong></strong>Demo<strong><strong>Icon Font Library</strong></strong>Fontelloetao 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? ) Icomoonemoji Emoticons Library<strong><strong>References</strong></strong>Common mistakes with Adding Custom Fonts to Your iOS AppIcon font practice Fontasticiconsios-fontawesomecustom Unicode characters In Objective-ccss3 icon font Complete guide<p><p>Using the icon font in iOS</p></p></span>