QiShare team: QiShare team: QiShare team: QiShare team: QiShare team: QiShare team: QiShare team: QiShare team: QiShare team: QiShare team: QiShare team: QiShare team: QiShare team: QiShare team: QiShare team: QiShare

Requirements: Sometimes we want to develop some ourselvesAppBut there is no design for distressiconCut the figure? What can I do?

Today we will introduce a more efficient and high-quality alternative: using vector ICONSiconFont.

A brief introduction to iconFont

IconFont: is a vector icon library provided by Alibaba. To put it simply, icon can be converted into font and displayed through text. Official website link supported: Web, iOS, and Android platforms.

2. Simple usage guide for iOS

The first step:

Go to iconFont, pick up the ICONS you want, add them to your shopping cart, and download the code.

  • Choose ICONS in a unified style

  • Search globally for the desired icon

  • Add the icon you want to use to the shopping cart

  • Download the code

The second step:

Unzip the downloaded package and pay attention to the demo_index.html and iconFont. TTF files. Open the project import TTF into the project and configure it in info.plist.

  • Zip the file and find itdemo_index.html,iconFont.ttf

  • williconFont.ttfFile import project:

Step 3:

Open demo_index. HTML to preview the Unicode encoding for iconFont. And apply it to the project.

  • Open thedemo_index.htmlfile

  • Swift is used as follows, in format\ u} {codingUsing Unicode encoding
/ /...
label.font = UIFont.init(name: "iconFont", size: 26.0)
label.text = "\u{e658}"
/ /...
Copy the code
  • The way to use Objective-C is as follows, in format\ U0000 codingUsing Unicode encoding
/ /... label.font = [UIFont fontWithName:@"uxIconFont" size: 34];; label.text = @"\U0000e658"; / /...Copy the code

This way, in cases where no cut image is provided by the design, the ImageView effect can be achieved by replacing the cut image with the iconFont font of the Label.

Three, iconFont principle

The icon is first described as a custom font (SVG font) through pixels, and then packaged as a TTF file, and then corresponding to the relevant icon through the corresponding Unicode.

Four, some problems may be encountered

  • morettfFile import conflict:

The font name of TTF files generated from iconFont is iconFont. Therefore, the font name of TTF files downloaded from the official website is iconFont. Therefore, when multiple TTF files are introduced, there will be conflicts.

Solution: Use some tools to change font names and import multiple TTF files. (Remember to configure it in the info.plist file)

  • UnicodeChange problem:

Try to use one account to download TTF resources. Different environments may produce different Unicode. Thus, it costs the project to replace icon.

  • Copyright:

IconFont should not be commercially available at this time, unless specifically licensed. It can be used when writing small projects on your own.

To learn more about iOS and related new technologies, please follow our official account:

You can add the following xiaobian wechat, and note to join the QiShare technical exchange group, xiaobian will invite you to join the QiShare technical Exchange Group.

QiShare(Simple book) QiShare(digging gold) QiShare(Zhihu) QiShare(GitHub) QiShare(CocoaChina) QiShare(StackOverflow) QiShare(wechat public account)

Recommended articles: DarkMode, WKWebView, Apple login must be adapted? IOS Access To Google and Facebook login (2) iOS access to Google and Facebook login (1) Nginx Getting started 3D transformation in iOS (2) 3D transformation in iOS (1) WebSocket dual-end practice (iOS/ Golang) Today we are going to talk about WebSocket (iOS/Golang) strange dance team Android team — aTaller strange dance weekly