Iconfont in the educational platform and application examples in iOS

Iconfont System Solution

Performance optimization is the front-end development has to face, must pay attention to a durable topic. Education Platform Project in addition to the regular Web performance optimization, picture resources station to the flow of 70%+, so the picture performance optimization is a top priority. In addition to the normal picture optimization, the course cover and the organization uploaded pictures adopted the WEBP format, has been introduced before, no longer repeat. So, the optimization of the platform picture has reached the extreme?

Now in web Development, icon font technology is widely used, it is not only to solve the problem of multiresolution display is very effective, but also in the use of it can reduce the cost of design and development.

So can it be applied to iOS development? With this in mind, I found fontasticicons and ios-fontawesome on GitHub, but these two OC packages are limited to icon resource encapsulation and are not easily extensible.

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

How to use custom fonts

Before you talk about icon font, let's first look at how common 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 your project (iOS-supported font formats include:. TTF,. OTF, other formats are not determined):

Then, in the resource pool of the project, confirm that the font file is added to the project, and open the Xcode project's build phases to view:

Step 2: Configure the. plist file

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

Step 3: Find the Font set name

After registration, we need to detect whether the registration is successful and get a new font name, the detection method is to all installed fonts are printed out to see if the new registered font is 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, and if so, register successfully, and remember to save the font name (here is "Kaushan Script") for later use.

Step 4: Use a new font

Finally, use the latest fonts you added:

Uilabel *label = [[Uilabel alloc] Initwithframe:cgrectmake (10, 60, 300, 50)];

Label.font = [Uifont fontwithname:@ "Kaushan Script" size:35];

Label.text = @ "icon font";

Label.textcolor = Uicolorfromrgb (0xff7300);

[Self.view Addsubview:label];

Effect:

Start using icon font

The icon font is also a font, using the same way as above, but only slightly different; here's the Fontello icon font library for example.

1. Select the icon you want

Select the icon you want in the Fontello icon font library and download the generated font file.

2. Follow the steps above to register icon fonts in your project

3. Find the corresponding Unicode code for 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. Using icons

Uilabel *label = [[Uilabel alloc] Initwithframe:cgrectmake (10, 60, 300, 50)];

Label.font = [Uifont fontwithname:@ "Fontello" size:35];

Label.text = @ "\u0000e802 \u0000e801 \u0000e803 \u0000e804 \u0000e805";

Label.textcolor = Uicolorfromrgb (0xff7300);

[Self.view Addsubview:label];

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

5. Use Emoji expression Library

Here you can also use the Apple Emoji Expression Library icon, there is no need for 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 vector graphics, scaling please self-respect.

Uilabel *label5 = [[Uilabel alloc] Initwithframe:cgrectmake (10, 480, 300, 50)];

Label5.text = @ "\u0000e42a\u0000e525\u0000e41c";

[Self.view Addsubview:label5];

6. Effect

7. Use homemade icon font

If the icon library described above does not meet your needs, or the icon you need to distribute in multiple icon libraries and not focus on a font file, then you may need to create your own icon font file.

Summarize

In this way, in the development of iOS, not only can go directly to the 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 you can liberate a lot of designers and engineers work.