How to apply the font icon to the mobile app icons fonts

How to use the icon fonts in your mobile apps

The most perfect way to achieve graphical vector scaling in any app design is to use a font icon.

The design of the mobile end becomes more and more complex. The reason lies in the variety of screen sizes and different resolutions. The native app is virtually impossible to provide a perfect visual experience at pixel level.

When we design the various icons in the app interface, we have to face two aspects, the good side is that the use of real icons, that is, using pixels to design a user-friendly interface, such an interface can better help users understand and use your app, the less good side is tedious "repetitive work." Once your masterpiece is complete, you'll have to start slicing, organizing, optimizing, adapting, and so on, and when developers apply your visual design to different devices, the work is always worn on every project.

Basically I love to use pixel icons very much, but I recently found that I spent a lot of time cleaning folders and looking for different specifications for target devices. While there are many plugins available to help you export from a single source to a variety of icons and graphics, tracking the optimization of various resolutions, operating system slices is a chore that can be avoided. Let's take a look at vector-based icon fonts (icon fonts)

Using the Icon font generator of the Fontello website, we can generate a set of icons in minutes

Friends with Benefits (gun friend?) )

When designing the product UI, many of our artists try not to use pixel images, but prefer to use vector graphics for a variety of reasons. For a chestnut, work in a team that needs to quickly change requirements and require quality. Keeping the file size maintainable and adapting the UI to a variety of screen sizes is a small feature of vector graphics applications. Vector Graphics can keep you from going crazy over a long-term project.

In the face of problems such as adaptive, load time, or retina screen, vector graphics-based solutions have become a basic solution, like CSS, for different users to design high-quality web UI, due to the recent browser in the custom font of better support,  Many artists even make their icons Web fonts, which is based on the advantages of vector graphics. As a mobile artist, I spent too much time cutting, organizing, and packaging graphics, and I wondered if I could apply this advanced web technology to native apps.hoping to stop focusing on resolution, device size, and really focus on the work of the design itself, I'm determined to use icon fonts to enhance the UI of iOS and Android apps to load a user-defined font within a project folder within the app properties listIcon fonts is an amazing solution for scalable, adaptive design. When developing the native app, you should remember that the icon fonts technology has more advanced features than bitmaps, and the benefits of these features can affect your design workflow and the final quality of the product.

Scalability (Scalability):

The font-based icon is a technology that is independent of resolution and can scale to any desired degree. Your icons don't seem to care about retina,hdpi,xhdpi and so on screen, but the rendering will automatically adjust according to the target device, you will be able to deal with any current, future, or most arbitrary specifications of the device

Size ( size):

Crop to the correct proportions, the icon font's file size than the bitmap is incredibly small, when using the icon font, you do not need to prepare different images according to different devices, your app only need to load the icon font file at startup. maintainability (maintainability):Since your icon is packaged into a font file, you only need to maintain this single font file throughout the project. By managing font files you can naturally organize your icon collections, modify or extend them arbitrarily. Scalability (Adoption):However, applying such an icon fonts may affect the workflow between you and your colleagues, but convincing them to adopt such a technique is also very simple, with several free or paid tools to help you easily achieve your goals and see good application results, in almost any mobile platform, browser or operating system Flexibility (flexibility):One of the most significant capabilities in applying the icon fonts technology is the ability to manipulate the icon fonts, change the color, size, and just a few lines of code to change the appearance in an instant Interoperability (interactivity):With flexibility and easy-to-code manipulation, icon fonts is uniquely manipulated at runtime, and by applying the icon fonts technology, you can easily display different effects and create animations in different states. While the icon fonts offers many benefits for design to provide possibilities for some interesting designs, naturally, it is also not a full-fledged solution. Once your design requires more than one color to achieve complex visual design, the icon font is limited. No, mainstream and non-mainstream icon fonts can be found on the Internet, before we use the web design community has become popular, and has a lot of services to help you create a Dream icon Fonts collection with outlet connection in Xcode, you can easily change the label after the view is rendered . Using icon fonts on IOS using the font icon in iOS Applying the icon font to iOS is a very simple and rough blast. In the beginning you'd better collect some icons and integrate them into your app by using Fontello or Icomoon. Another way to do this is to take the time to do it yourself, but creative work always takes a lot of your time. So now we just need to integrate the obtained icon into our app you just have to understand the basic file structure of iOS development and the. TFF suffix font file icon font in order to test the icon font technology, we create a new one within Xcode Single View applicationof the project. After the completion of the project to copy your font files into the engineering directory, if nothing unexpected, you should be in your Project NavigatorSee the corresponding font file in order for Xcode to understand how you are going to use the imported file, you have to create a "link" within the info.plist of your application. This plist file is displayed as meta data in the supporting Files folder and can be understood as a hash table. To include your font file when compiling the app, simply create a new line on the list (right-click and add Row) with the name selected as Fonts provided by Application, under which a name is given to the font file, and the name is used by your application to identify your font file. In our test project, the value is Fontello.ttf. Now Xcode know what we import the file can do, we can use the imported font file in the program to switch your app to storyboard mode, in the view where you like to put a label component to display icon, after setting the label, We need to build a outlet. It's easy to do these things in storyboard, Assistant Editor mode This mode shows your graphical interface and the Viewcontroller interface. Now simply hold down the CTRL key, drag from the label component will be the line, drag the line directly to Viewcontroller to @interface this line of code will pop up a small interface, enter the name, such as Iconlabel,outlet built, You'll find the following line in the code:

@property (Weak, nonatomic) Iboutlet UILabel *iconlabel

Now you can control the label component through the code, setting the label by editing the Viewcontroller (. m suffix file). Add the following lines of code within the Viewdidload method, as follows

void

[IconLabel setfont:[uifont Fontwithname:@ "fontello" size:
[IconLabel settext:[nsstring stringwithutf8string:"\u2692"
}

Add the first code to define the font applied to the label and set the font size, here we set the 130pt when using these commands to pay attention to the name of the font, here to fill in the real name of the font, that is, the font book opened in the name of the font or any other editor can display the font name. Pay particular attention to this, because the font name is likely to be different from the font file name in the second line of text with Unicode characters Hammer and Pick (2692)Coding. While it's a bit cryptic, it's easier to get the Unicode character encoding for the icon font. You can use the Font editor, or upload directly to the icon Moon site, you can easily convert the icon font to Unicode encoding You can use the Android XML syntax to declare any UI properties you want Colours, gradients and ShadowsNow that the icon "quote" has been established, you have done it. Before we manipulate the label through the code, you have to run a look at the results of your work. Finally, this is what you will do to merge the icon font into the app. Interesting things start from now on. All the actions of the text are in your hands, for example: color, transparency, gradients, shadows. For example, apply the following lines of code to turn icon into a red + shadow:

Iconlabel.textcolor == = Cgsizemake (1.0f1.0f);

There are many effects that can be used. Some are relatively complex, but all text effects are common. Animations or any complex operations you can do as long as you can think of.

Using icon fonts on Android apply a font icon to Android

Similarly, when developing Android apps, the same can be done with icon fonts, just as it does with iOS. Android is more interesting and useful in terms of scope of application. Because Android has more different resolutions, different screens of device platforms. Most importantly, Android does not support vector graphics by default, which is a big hit for developers and designers who are facing different Android devices. Before you start developing your new Android app, you just need to know the basic file architecture of an app, the same icon The font file is also the. TFF suffix, using the Eclipse IDE with Android ADT, you can start creating a new blank activity for Android application Project. After the project is set up, the complex. TFF file is within the directory of your resource files. Once the copy is successful, the Package Explorer panel should be able to see the next, creating a TextView within your main Activity view. You can find your resource file within the Layout folder. The file name should be activity_main.xml. In most cases, the Android SDK has put a textview with the text "Hello World" in your view and we can use this textview. after defining the icon properties, you can see your icon in the simulator. In order to operate the TextView, we need to switch the graphics mode to the XML view. Now add an ID to the TextView so that the UI and code will build a reference relationship your textview should look like this

< TextView
Android:layout_width = "Wrap_content"
Android:layout_height = "Wrap_content"
Android:text = "@string/hello_world"
Android:id= "@+id/iconlabel"/>

by using the ID, we are able to operate TextView anywhere within the app. Now you can switch to the Mainactivity.java file and add some code to load the icon font. There is a method named OnCreate within Mainactivity. Loading and applying the icon fonts are all within this method, as follows

Iconlabel.settypeface (font); Iconlabel.settext ("\u2692");

Like the iOS example above, by referencing to the label component, we tell Android which custom font should be used to textview. The next few lines are encoded using Unicode characters, this time in Java mode. After running the program you can see that your icon is on the main activity view.

After the application is successful, you can manipulate the icon according to your needs. Android UI builds are typically implemented by interface Builder or an organization XML file, and to add some effects, just go back to the XML section of main activity and find the place where you added the label ID, adding some code. For example, adding the following code will make your icon larger, with a bit of transparent red, with a shadow.

Android:id= "@+id/iconlabel" android:textsize= "120DP" android:textcolor= "#ccff0000" android:shadowcolor= "#99000000 "android:shadowradius=" 2 "/>

There are many effects that can be applied. Just like in iOS, you have control over animations or complex operations. The biggest benefit is that the custom icon fonts can be adapted to a wide range of operating systems. Any platform that supports the custom icon fonts allows you to use these new effects

Using the Font editor, you can optimize existing icons or liberate your mind to create your own masterpiece

Wrap upSummarize

Using the icon fonts when developing the native app is incredibly good. Given the scalability of the icon fonts, you can almost ignore the screen size and resolution when you design any mobile device app. The greatest benefit is that the flexibility of icon fonts in the app can be manipulated throughout the app, enabling real-time effects and animations. In addition, because of the easy adaptation of the icon fonts, in the design work and the main management work can enhance the overall workflow is half times, regardless of the resolution or screen density.Translator's words To apply a font icon, the first thing to do is to embrace a flat design why flatten it?

• Making the design easier from the technical implementation
• Apple, Google, Microsoft, have launched a flat or similar design language
• Flat, large color block design for easy identification and operation on handheld devices or on-board devices
• HTML5 to achieve a flat UI with better performance
• Flat large color block design with PNG images for better compression ratios and smaller image files

========================================================English text, may need to turn qiang:http://www.creativebloq.com/app-design/icon-fonts-in-apps-21410734

English proficiency is limited, make a turn, all when self-learning welcome Exchange study

Reprint Office Please specify: Blog Park (Wang two dog, pool of things) [email protected]

How to apply the font icon to the mobile app icons fonts