This section focuses on creating several icon fonts and using the Iconify extension.

The Github project for this series of articles is IconFontApp

As mentioned in the previous section, if there are many custom ICONS in the project, or ICONS from different sources, we can extend Iconify. But before extending Iconify, we need to make our own icon font file. How do we make icon font files? Try Fontello, Icomoon, or IconFont.

There are many ways to create icon fonts, you can refer tohere, this article mainly introduces how to quickly make font files using existing ICONS and then use them in the application.)

1.Fontello: icon font generator

Fontello: fontello.com/ Github: github.com/fontello/fo…

Fontello is an icon font generator that allows you to make ICONS into fonts for your own projects. A large number of professional-grade open source ICONS are available on the Fontello home page, with support for adding custom ICONS (in SVG format) and the ability to select ICONS from different sources on the site to be combined into a single font file. In addition, it can also customize the name of each icon and the corresponding Unicode code. Once configured, the icon font can be downloaded and used in the project. As shown in the image below, I added two Custom Icons, six from Fontelico, three from Font Awesome, etc. The resulting Font file contained the Icons I needed.

Customize the icon name and corresponding Unicode: You can set the prefix of the icon name in the configuration at the top of the page, for examplefe-

Download and get a ZIP file, unzip and open itdemo.htmlYou can see the names and corresponding Unicode of all ICONS in the icon font

At the same time, there is the TTF font file fontello. TTF that we need in the font folder after decompression. The detailed implementation steps of the extension are introduced below.

(1) Create an Android Studio project and add a dependency on Iconify in the app

The compile 'com. Joanzapata. Iconify: android - iconify: 2.2.2'Copy the code

(2) Create an assets folder and copy the font file fontello. TTF to the folder. (3) Create a FontelloModule class to implement the interface to IconFontDescriptor.

public class FontelloModule implements IconFontDescriptor { @Override public String ttfFileName() { return "fontello.ttf"; } @Override public Icon[] characters() { return FontelloIcons.values(); }}Copy the code

(4) Create a FontelloIcons enumeration to implement the Icon interface. The contents are as follows:

public enum FontelloIcons implements Icon { fe_spin1('\uE800'), fe_spin2('\uE801'), fe_spin3('\uE802'), fe_spin4('\uE803'), fe_spin5('\uE804'), fe_github('\uE816'); char character; FontelloIcons(char character) { this.character = character; } @Override public String key() { return name().replace('_', '-'); } @Override public char character() { return character; }}Copy the code

(5) Test: Add an IconTextView to the activity_main. XML layout file


    android:id="@+id/iconTextView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:layout_centerHorizontal="true"
    android:text="{fe-github} {fe-spin1 spin} {fe-spin2 spin} {fe-spin3 spin} {fe-spin4 spin} {fe-spin5 spin}"
    android:textSize="20sp"
    android:textColor="@android:color/black"/>
    Copy the code

Then add an initialization action to the end of MainActivity’s onCreate method

Iconify.with(new FontelloModule());
Copy the code

Run the app to see the effect see the screenshot at the end of the article, the icon can be set to the rotation effect yo, a bit cool ah!

2.IcoMoon

Like Fontello, IcoMoon allows you to add your own icon, select images from other icon libraries, set icon names and Unicode, and finally export icon font files. The IcoMoon export results in a zip file similar to the Fontello export, and Iconify is extended in the same way using its TTF file.

3.IconFont

IconFont website: www.iconfont.cn/ IconFont but Chinese IconFont production website yo! The site is made by alibaba’s UED team, which makes it easy to manage ICONS and create icon font files. The Android app tutorial in the help section explains how to use the downloaded IconFont, which is relatively simple. Note, however, that the ICONS you see in the demo.html download are encoded in UTF-8, not Unicode. In addition, TextView setText is automatically rendered in Unicode if r.string. XXX is used as a setText parameter. However, if you pass a string as an argument, the string will be treated as Unicode encoded by default, which means that if it is not Unicode encoded, it will display an exception!

This is clear by looking at the code below, which shows the different invocation methods in 4 and shows the results of the different invocation methods

textViewIconFont = (TextView) findViewById(R.id.textView_iconfont); textViewIconFont.setTypeface(Typeface.createFromAsset(getAssets(), "iconfont.ttf")); textViewIconFont.setText("\ue601 \ue602 \uE603 \uE606"); TextViewIconFont. SetText ("     "); textViewIconFont.setText(R.string.text_iconfont_utf8); textViewIconFont.setText(R.string.text_iconfont_unicode);        Copy the code

You can refer to other documentation on how to change the UTF-8 encoding to Unicode, but here the conversion is simple by extracting the 16-bit representation. For example, the utF-8 encoding  corresponds to the Unicode encoding \ue601, which is e601. And the same goes for everything else.

projectIconFontAppThe running effect is as follows:

Can be seen from the above analysis, the icon of the font file making and Iconify to make use of font file extensions are also relatively simple, the only trouble is, if the project is used in a large number of ICONS, writing icon set enumeration class is boring, so next could develop a small script or plugin to finish the boring task. Oh, good night!

Yu Huai and Geng Geng are finally together, hi Sen, heh heh, the best of us and the best of us are really coming to an end, will soon graduate!