B4J Tutorial [B4X] FontAwesome & Material Icons fonts

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:

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/

 

[Cableguy]

Christmas is coming!!!

 

[so27]

Great and when it comes in B4A?

 

[Erel]

It will be included in the next updates of B4A and B4i.

 

[Douglas Farias]

wow very nice *-*
@Erel on next update can you please add a function (add font) in b4j?
for now i can add fonts with add files button on designer, but i cant use the font added.
on b4a i can add and use, only on b4j i cant do this.

example: i m added ubunto-regular.tff but i cant see this on font.


many thx

 

[DonManfred]

on next update can you please add a function (add font) in b4j?

This is not the right place to post wishes.

 

[fredo]

From the aspect of productivity this is a real timesaver.

 

[ktlua]

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 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:

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/

I am sorry that my IDE (B4A Beta #1 6.50) is different. I

cannot select the font nor the icons. Please help!

 

[inakigarm]

Have you follow the steps on Post1? (See the attached anim also)

 

[ktlua]

Have you follow the steps on Post1? (See the attached anim also)

I am using B4A Version 6.50 Beta #1. My Virtual Designer is different.

 

[Erel]

Make sure to set the Typeface to FontAwesome or Material Icons.

For further discussions please start a new thread in the questions forum.

 

[klaus]

As Erel sais, you need to set the TypeFace:

 

[tufanv]

This is Awesome !

 

[b2mvga]

Great improvement on B4A! Now it´s very easy to add more life on apps!

 

[tufanv]

Any news for the b4i implementation ?

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 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:

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/

 

[Erel]

It will be added in the next update of B4i.

 

[Phayao]

Hello,

this is an exciting new feature - well, I have a super-silly problem:
in my version 6.50 beta, there is no "text property" for buttons ?!?
and therefore no way to insert the icon:

What's wrong here ?

Thanks for helping an amateur out !

Chris

 

[fredo]

helping

 

[ThRuST]

B4X gets better and better. Amazing

 

[victormedranop]

How fast is to developer in b4x, this comunity it's amazing.