B4J Tutorial [B4X] FontAwesome & Material Icons fonts

Status
Not open for further replies.
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.

SS-2016-11-09_14.33.14.png


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).

icons_picker.gif


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/
 
Last edited:

fbritop

Active Member
Licensed User
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
 
Last edited:

fbritop

Active Member
Licensed User
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
 

fbritop

Active Member
Licensed User
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

Active Member
Licensed User
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?
 

tufanv

Expert
Licensed User
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.
 

drgottjr

Well-Known Member
Licensed User
B4X:
    Dim MyFont As Typeface = Typeface.LoadFromAssets("Whatever.ttf")
    Dim MyLabel as Label
    MyLabel.Initialize("")
    MyLabel.Typeface = MyFont
 
Status
Not open for further replies.
Top