The application example of iconfont in IOS development

Time:2021-4-10

In the development of IOS, the use of various icons is inevitable. If all the icons are made into pictures and put into the project, with the gradual expansion of the project, the place occupied by the pictures will be larger and larger, and the installation package will also be larger. If the icons need to use different colors according to different scenes, the pictures need to be made into different pictures Color pictures, for the app that can change the skin, the installation package will be bigger. In order to make the installation package of the app slimmer, iconfont is produced. The introduction and production of iconfont will not be introduced for the time being.

Step 1: get the iconfont file.

The company will have UI to draw and let them provide files. If they learn to test or do their own projects, they need to find their own materials. I usually use Alibaba’s icon library( http://www.iconfont.cn )。

Open the URL and search for the icon you need

Move the mouse to the icon, click the small shopping cart icon, and then click the small shopping cart icon in the upper right corner,

Click download code to download a compressed package containing iconfont. The directory of the folder is shown in the figure below

Step 2: import TTF file

Place the iconfont.ttf Drag the file directly into the project, and remember to check the option in add to targets

Step 3: modify info.plist

Click the Add button, enter uiappfonts, and click enter to automatically change to an array named fonts provided by application. Click add an item of type string, and enter iconfont.ttf , this is the name of the file you just imported. Click enter to finish the configuration;

Step 4: check the icon code in iconfont

We use Unicode, so you can find the demo in the folder you just downloaded_ unicode.html File, double-click to open, you can see the following content

The string under the icon name is the encoding we need, but we need to convert it. If it is Objective-C, we need to convert it to {u0000e642}. If it is swift, we need to convert it to {e642}. The encoding of each icon is different, but the corresponding relationship is the same. There may be more than one icon in each iconfont file It can be used according to the corresponding icon code;

Step 5: use iconfont in your project

I’m using swift. Objective-C is used in a similar way. You can try it yourself, but the result of coding conversion is different


let iconLabel = UILabel.init(frame: .init(x: 0, y: 0, width: 100, height: 30))
iconLabel.text = "\u{e642}"
iconLabel.font = UIFont.init(name: "iconfont", size: 15)

The name in font is the name of the file you import. If you want to give the icon a color, you can directly set the text color of the label. If you set the size, you can directly set the font

Summary: the use of text icons is very convenient, and it can also reduce the size of the installation package. If there are too many icons in the project or the icon color needs to be changed at any time, it is recommended to use them. If there are only a few and the color does not need to be changed at any time, there is no need to cut a few small icons.

The above is the whole content of this article, I hope to help you learn, and I hope you can support developer more.