Mobi Builder


Font awesome

What is font awesome?

Font awesome is a icon library. You can use it to put visual icons inside your application.



Finding an icon

You can browse the font awesome icons here: https://fontawesome.com/icons. After finding an icon that you like, you will see a code snippet at the top of your screen, like the following:

Depending on which icon you choose, the code snippet will be slightly different. You only need to get the bold part, inside the speech marks. In this case, this is fas fa-adjust. You will need to input this part of the code snippet into the property HTML - className of the icon user interface component. After saving, the icon will show up.



Chaning the icons size

Again, we are going to use the icon fas fa-adjust as an example. To make this icon two times larger, we need to replace this with fas fa-adjust fa-2x

Original 2x 3x


Changing the icon using blocks

In this example, when the user clicks on a button, an event is fired and the icon will change. You will need to change this example so that is specifies the icon component that you wish to change and so that it changes it to the icon that you want.