B4J Tutorial [B4X] FontAwesome & Material Icons fonts

Discussion in 'B4J Tutorials' started by Erel, Nov 9, 2016.

  1. Erel

    Erel Administrator Staff 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 / B4i v3.50 they are integrated in the IDE.

    [​IMG]

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

    [​IMG]

    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:
    Code:
    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: Dec 15, 2016
  2. Cableguy

    Cableguy Expert Licensed User

    Christmas is coming!!!
     
  3. so27

    so27 Active Member Licensed User

    Great and when it comes in B4A?
     
  4. Erel

    Erel Administrator Staff Member Licensed User

    It will be included in the next updates of B4A and B4i.
     
    pesquera, corwin42, so27 and 3 others like this.
  5. Douglas Farias

    Douglas Farias Expert Licensed 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
     
  6. DonManfred

    DonManfred Expert Licensed User

    This is not the right place to post wishes.
     
  7. fredo

    fredo Active Member Licensed User

    From the aspect of productivity this is a real timesaver.
     
    victormedranop and Erel like this.
  8. ktlua

    ktlua Member Licensed User

    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!
     
  9. inakigarm

    inakigarm Well-Known Member Licensed User

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

    ktlua Member Licensed User

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

    Erel Administrator Staff Member Licensed User

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

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

    klaus Expert Licensed User

    As Erel sais, you need to set the TypeFace:

    upload_2016-12-1_16-35-5.png
     

    Attached Files:

  13. tufanv

    tufanv Expert Licensed User

    This is Awesome !
     
  14. b2mvga

    b2mvga Member Licensed User

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

    tufanv Expert Licensed User

    Any news for the b4i implementation ?
     
  16. Erel

    Erel Administrator Staff Member Licensed User

    It will be added in the next update of B4i.
     
  17. Phayao

    Phayao Member Licensed 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:

    [​IMG]

    What's wrong here ?

    Thanks for helping an amateur out !

    Chris
     
  18. fredo

    fredo Active Member Licensed User

    09-12-_2016_14-42-21.jpg
     
    Mashiane, priusfan, Erel and 2 others like this.
  19. ThRuST

    ThRuST Active Member Licensed User

    B4X gets better and better. Amazing
     
  20. victormedranop

    victormedranop Active Member Licensed User

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