Apple Development Swift Font icon usage and examples (using font awesome font library, non-picture)

One, what is the font icon

(1) Now more popular use font icon, the so-called font icon is actually a font library containing many icons. Like our common fonts, this can be understood as a special font, except that it contains icons.

(2) since it is a font, then the most convenient is to be free to change the color and size in the code without distortion. This does not require the creation of multiple pictures because of the various sizes, or the many sets of color icons used to identify different states.

(3) Whether it is a button icon or a navigation bar icon, whether it is a Web site development or mobile application development, font icon can be applied.

(for example, the following can be implemented using the font icon, such as the hangge.com right navigation bar on the small icon with the font icon)

Two, font Awesome icon Font Library

Font Awesome is one of the most popular and most comprehensive icon font libraries available. This set of icon fonts contains almost all the icons and social networking icons, Web application icons, and editor icons that may be used in the Web page.

Website address: Official address GitHub address

The main features are as follows:

✓ A font that contains 605 icons (up to 4.5.0);

✓ Pure CSS control, can easily define the color of the icon, size, shadow and any CSS can achieve the effect;

✓ Infinite Scaling, the vector icon in any size is exactly the same;

✓ Free use, including commercial and non-commercial projects;

✓ Supports Internet Explorer 7 browsers;

✓ can be perfectly presented on the Retina screen;

✓ Simple, easy to use;

✓ is friendly to designers and can be easily used by designers.

✓ and other icon fonts, compatible with screen readers;

The following are just a few of the icons in the Font library (click here to see all):

Three, the use configuration of the font awesome in Swift

(1) First add the font library FONTAWESOME.TTF to the project (if this name is not changed to this name, the following explains why)

(2) "Project"-> "Build Phases"-> in "Copy Bundle resources" to add Fontawesome.ttf.

(3) Download a font Awesome Swift Packaging Library to facilitate our use of the font Awesome. GitHub Address: Font-awesome-swift

You can then add Faicon.swift to your project (the font file whose default call is Fontawesome.ttf, or change it to another).

Iv. examples of the use of the font awesome in Swift
Because Faicon.swift defines an enumeration class (Fatype), it corresponds to both descriptive text and character encoding, as well as to common UI components such as Uitabbaritem,uibutton,uilabel,uiimageview, Uitabbaritem,uisegmentedcontrol,uiimage) has been extended. So we can easily use the font awesome fonts library.

Use text icon on 1,uiimageview

You can choose whether you want the background color (the background is transparent on the left and the gray background on the right)

Imageview1.setfaiconwithname (Fatype.fatwitter, TextColor:UIColor.blueColor ())

Imageview2.setfaiconwithname (Fatype.fatwitter, TextColor:UIColor.blueColor (),
BackgroundColor:UIColor.grayColor ())

Use text icon on 2,uilabel

(1) Can directly use the icon (support set icon size)

Use icons directly
Label1. Faicon = Fatype.fagithub
Use the icon directly and set the icon size
Label2.setfaicon (Fatype.fagithub, iconsize:35)
(2) Support graphics and text mixed row (at the same time the icon size can be set separately, and text size is not the same)

Label1.setfatext (prefixtext: "Welcome to my Microblog", Icon:FAType.FAWeibo,
Postfixtext: ". Thank you! ", size:20)

Use large Icons
Label2.setfatext (prefixtext: "Welcome to my Microblog", Icon:FAType.FAWeibo,
Postfixtext: ". Thank you! ", Size:20, iconsize:30)
(3) Text and icon color can also be changed

Label2.textcolor = Uicolor.bluecolor ()

Use text icon on 3,uibutton

(1) You can use the icon (Support setting icon size) alone

Button1.setfaicon (Fatype.faplay, forstate:. Normal)

Set icon size
Button2.setfaicon (Fatype.faplay, iconsize:35, forstate:. Normal)
(2) Support for both text and icon buttons (icon size can be set individually, and text size is not the same)

Button1.setfatext (Prefixtext: "", Icon:FAType.FASearch, Postfixtext: "Query",
Size:20, Forstate:. Normal)

Large icon button
Button2.setfatext (prefixtext: "Click", Icon:FAType.FASearch, Postfixtext: "Query",
Size:20, Forstate:. Normal, iconsize:30)
(3) Change the color of the button

Button2.titlelabel? TextColor = Uicolor.orangecolor ()

Use text icon on 4,uibarbuttonitem

The use of the same as UIButton, specific reference to the UIButton text icon.

Use text icon on 5,uisegmentedcontrol

Segmentedcontrol.setfaicon (Fatype.faphone, forsegmentatindex:0)
Segmentedcontrol.setfaicon (Fatype.facomment, forsegmentatindex:1)
Segmentedcontrol.setfaicon (Fatype.faenvelope, Forsegmentatindex:2)

Use text icon on 6,uitabbaritem

Tabbarcontroller? Tabbar.items? A. Setfaicon (Fatype.fatwitter)
Tabbarcontroller? tabbar.items! [1].setfaicon (Fatype.faweixin)
Tabbarcontroller? tabbar.items! [2].setfaicon (FATYPE.FAQQ)

Use text icon on 7,uislider

Slider1.setfaminimumvalueimage (. Fabellslasho)
Slider1.setfamaximumvalueimage (. Fabello)

Use large Icons
Slider2.setfaminimumvalueimage (. Fabellslasho, Customsize:cgsizemake (35, 35))
Slider2.setfamaximumvalueimage (. Fabello, Customsize:cgsizemake (35, 35))