How to integrate Icon fonts

suggest change

In order to use icon fonts, just follow the steps below:

You may create your font icon file from online websites such as icomoon, where you can upload SVG files of the required icons and then download the created icon font. Then, place the .ttf font file into a folder named fonts (name it as you wish) in the assets folder:

Now, create the following helper class, so that you can avoid repeating the initialisation code for the font:

public class FontManager {
  public static final String ROOT = "fonts/";
  FONT_AWESOME = ROOT + "myfont.ttf";
  public static Typeface getTypeface(Context context) {
    return Typeface.createFromAsset(context.getAssets(), FONT_AWESOME);
  }
}

You may use the Typeface class in order to pick the font from the assets. This way you can set the typeface to various views, for example, to a button:

Button button=(Button) findViewById(R.id.button);
Typeface iconFont=FontManager.getTypeface(getApplicationContext());
button.setTypeface(iconFont);

Now, the button typeface has been changed to the newly created icon font.

Open the styles.css file attached to the icon font. There you will find the styles with Unicode characters of your icons:

.icon-arrow-circle-down:before {
  content: “\e001”;
}
.icon-arrow-circle-left:before {
  content: “\e002”;
}
.icon-arrow-circle-o-down:before {
  content: “\e003”;
}
.icon-arrow-circle-o-left:before {
  content: “\e004”;
}

This resource file will serve as a dictionary, which maps the Unicode character associated with a specific icon to a human-readable name. Now, create the string resources as follows:

<resources>
  <! — Icon Fonts -->
  <string name=”icon_arrow_circle_down”>&#xe001; </string>
  <string name=”icon_arrow_circle_left”>&#xe002; </string>
  <string name=”icon_arrow_circle-o_down”>&#xe003; </string>
  <string name=”icon_arrow_circle_o_left”>&#xe004; </string>
</resources>

Now, you may use your font in various views, for example, as follows:

button.setText(getString(R.string.icon_arrow_circle_left))

You may also create button text views using icon fonts:

Feedback about page:

Feedback:
Optional: your email if you want me to get back to you:


Enhancing Performance Using Icon Fonts:
* How to integrate Icon fonts

Table Of Contents
2 Gradle
5 Intent
17 Service
19 WebView
31 SQLite
35 Glide
37 Dialog
38 ACRA
44 Handler
53 Toast
63 Menu
65 Picasso
70 Volley
71 Widgets
78 Realm
90 Spinner
95 OkHttp
96 Enhancing Performance Using Icon Fonts
108 TextView
109 ListView
111 Loader
118 Xposed
119 Security
121 ImageView
123 Doze Mode
130 Drawables
131 Colors
134 Fresco
139 AdMob
145 Keyboard
146 Button
150 EditText
155 Vk SDK
163 ExoPlayer
169 XMPP
175 OpenCV
177 Threads
184 ORMLite
186 TabLayout
190 LruCache
192 Zip files
194 Fastlane
199 FileIO
202 Moshi
210 VideoView
216 Paint
218 ProGuard
226 CleverTap
228 ADB shell
229 Ping ICMP
230 AIDL
234 Context
240 JCodec
242 Okio
249 FuseView
254 Looper
261 Fastjson
263 Jackson
267 Smartcard