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:

so27

Active Member
Licensed User
Longtime User
Great and when it comes in B4A?
 

Douglas Farias

Expert
Licensed User
Longtime User
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.
Sem título.jpg 2.jpg

many thx
 

ktlua

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

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/

I am sorry that my IDE (B4A Beta #1 6.50) is different. I
FontAwesome.jpg
cannot select the font nor the icons. Please help!
 

b2mvga

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

tufanv

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

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/
 

Phayao

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

test.png


What's wrong here ?

Thanks for helping an amateur out !

Chris
 
Status
Not open for further replies.
Top