Font Icons

Introduction:

Font icon is mainly used to reduce .apk size and do not take much more memory for the image file, before we have used many images in your projects its may occur out of memory issue and project size also too high.

FontAwesome is an awesome tool for designers and developers which give us scalable vector icons that can be easily customized. You can style a FontAwesome icon as any other fonts such as size, color, shadow, animation, transition etc. FontAwesome offers more than 605 fonts icons in a single collection. You don't need JavaScript to run font awesome and it has infinite scalability which means every icon looks great and awesome at any size you define. Font awesome is free for commercial use and is also desktop friendly.

There are 4 files for each icon: mdpi, hdpi, xhdpi, xxhdpi. Total size of those 20 files is 33,8 kb (33824 b).

Approximately 6-8 kb for the one icon. But in some cases (when your icons have quite much details) they can take around 10 kb per one icon.

So, what about font size? Well, size of .ttf file which contains these icons takes 2,3 kb (2280 b). This is just 6% from .png files size! There is 30 kb saved only for 5 icons!

 

Steps:

MainActivity

1. Download fontawesome-webfont.ttf file from this link.

2. Copied and pasted fontawesome-webfont.ttf into assests folder.  

3. Created an entry in strings.xml for each icon.

<string name="icon_heart">&#xf004;</string>
<string name="icon_bitbucket">&#xf171;</string>
<string name="icon_birthday">&#xf1fd;</string>
<string name="icon_vimeo">&#xf194;</string>

4. View of my xml layout:

<TextView
    android:id="@+id/textView_one"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:layout_alignParentTop="true"
    android:layout_marginTop="50dp"
    android:textColor="@color/colorAccent"
    android:textSize="50dp"
    android:text="@string/icon_heart" />

4. Loaded the font in my onCreate method and set it for the appropriate Views:

Typeface font = Typeface.createFromAsset( getAssets(), "fontawesome-webfont.ttf");

textViewOne = (TextView)findViewById( R.id.textView_one);
textViewTwo = (TextView)findViewById( R.id.textView_two);
textViewThree = (TextView)findViewById( R.id.textView_three);
textViewFour = (TextView)findViewById( R.id.textView_four);
textViewOne.setTypeface(font);
textViewTwo.setTypeface(font);
textViewThree.setTypeface(font);
textViewFour.setTypeface(font);

5. For more icons needed get it from this link.


Happy Coding....

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest