B4J Tutorial [B4X] FontAwesome & Material Icons fonts

Erel · Nov 9, 2016

FontAwesome and Material Icons are two free icon sets including more than 1500 icons.
They are implemented as regular font files which means that each icon is a regular character, exactly like any other Unicode character.
Only fields that use the FontAwesome or Material Icons font will show the icon characters properly.

Starting from B4J v4.70 / B4A v6.50 / B4i v3.50 they are integrated in the IDE.

It is very simple to use the icons.

1. Set the control's font to FontAwesome or Material Icons.
2. Open the icon picker.
3. Click on an icon. It will be copied to the clipboard.
4. Paste it in the FontAwesome or Material Icons field. Click on enter to set it (or switch to a different control).

Note that you can leave the icon picker open and use it with other controls.

You can also use the icons in your code.
- Right click in the code editor and choose Icon Picker.
- Click on an icon to copy it to the clipboard.
- Paste it in your code. It will look like:

B4X:

Button1.Text = Chr(0xF17B)

Make sure that the control's font is set to the correct font.

The IDE will automatically add and load the relevant font file based on the font usage (in the designer).

Tips:
- FontAwesome font include the standard latin characters. You can combine the icons with text.
- Material Icons only include the upper case characters.
- You can use the icon characters everywhere you like as long as the font is set correctly. It will work even if the character doesn't show properly in the IDE
- The licenses of both fonts allow free usage in commercial applications:
FontAwesome: http://fontawesome.io/license/
Material Icons: Apache License 2
https://material.io/icons/

fbritop · Dec 14, 2016

Erel, how do you setup the TypeFace of the control in order to use it as Awesome o Material from the code editor?. Actually I'm adding a invisible label control to the activity and copy the typeface from there (added from the Designer)

Thanks
FBP

Erel · Dec 14, 2016

Not sure that I understand. You should use the copy to clipboard button and then paste it in your code.

fbritop · Dec 14, 2016

For example, I have a button that I want to add an icon and text. The button is created on the activity.create and not in the designer. What typeface to the button should I assign so the button can understand:

B4X:

btnComplete.Text=Chr(0xF00C) & " Finalizar Solicitud"

I cannot find a typeface to assign during runtime. What I'm doing right now, which is not very efficient, is adding a label control to the layout in my designer, with FontAwesome as type face and make it invisible. And then during runtime, when I create the button (which by the way needs to be created because it is added to a custom list view) I assing button.typeface=buttonAddedInDesigner.typeface

So how can I have button.typeface=typeface.FontAwesome or something like that. For both cases, FontAwesome and Material Icons.

I hope it is more clear now.
Thanks
FBP

Erel · Dec 14, 2016

fbritop said:
What I'm doing right now, which is not very efficient, is adding a label control to the layout in my designer, with FontAwesome as type face and make it invisible.

This is the correct solution. It is a bit cumbersome however it will not affect the performance in any way.

fbritop · Dec 14, 2016

Erel said:
This is the correct solution. It is a bit cumbersome however it will not affect the performance in any way.

I found a workarround. You can copy both files to the assets (I dont know why when I switched to Release mode both TTF files were not copied, so I copied them manually and put the as Read Only).

Then you can do:

B4X:

imgDistance.Typeface=Typeface.LoadFromAssets("b4x_materialicons.ttf")

Cheers

so27 · Dec 22, 2016

Can I add the icons also in dialogs (MsgBox2, DateDialog) as an icon? If so, how the? Can I do this with Activity.AddMenuItem3 use?

Erel · Dec 22, 2016

Please start a new thread for these questions in the questions forum.

walt61 · Dec 22, 2016

@so27 : I was looking for that as well and found @Erel's 'TextToBitmap' sub there which (no surprise there) works like a charm : https://www.b4x.com/android/forum/t...awesome-and-material-icons.73646/#post-467852

tufanv · Dec 29, 2016

this is one of the biggest feature of b4x. Previously I was searching for the icons on the internet , some free some paid , than create imageviews , make them transparent etc. But these icons saved a l lot of time . Thanks again Erel. As I use them, I understand their importance.

boon2 · Jan 6, 2020

how to user truetype font .ttf for label

drgottjr · Jan 6, 2020

B4X:

    Dim MyFont As Typeface = Typeface.LoadFromAssets("Whatever.ttf")
    Dim MyLabel as Label
    MyLabel.Initialize("")
    MyLabel.Typeface = MyFont

B4J Tutorial [B4X] FontAwesome & Material Icons fonts

fbritop

Well-Known Member

Erel

B4X founder

fbritop

Well-Known Member

Erel

B4X founder

fbritop

Well-Known Member

so27

Active Member

Erel

B4X founder

walt61

Well-Known Member

tufanv

Expert

boon2

Member

drgottjr

Expert

Similar Threads

B4J Tutorial [B4X] FontAwesome & Material Icons fonts

Well-Known Member

B4X founder

Well-Known Member

B4X founder

Well-Known Member

Active Member

B4X founder

Well-Known Member

Expert

Member

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency