Discuss

Using Font Awesome

On this page

Wappler offers support for Font Awesome 4 and Font Awesome 5. In this tutorial you will learn how to add and use Font Awesome on your pages.

Adding the Font Awesome framework

Font Awesome is available as framework to insert in the standard Add Framework menu:

image|549x274

It is also auto included when you choose the other frameworks like Bootstrap 4:

image|356x239

But you can also add it manually:

image|555x337

The green checks indicate the included version, so switching from Font Awesome 4 to version 5, is just a single click away:

image|553x375

There's a built-in converter that will magically translate all Font Awesome 4 codes to the new version 5!

image|454x226

Making the transition really easy to the latest version!

The Font Awesome Icon Inspector

Once added on the page you will be able to inspect the existing icons by just choosing an element and scrolling down the property panel:

image|579x500

There you will see the new Font Awesome icon properties.

Brand New Icons Picker

And picking a new icon has never being easier with the brand new icon picker:

image|542x499

There you can do quick search, toggle styles or categories you want to see and just click the icon you want to pick it.

it will be automatically selected in the properties and added to your page.

Adding New Icon

Many of the existing Bootstrap 4 elements now have ability to be extended with Font Awesome icons. So choose any title, paragraph, button, links, list items, navigation items etc and just scroll down in its property panel till the end to see:

image|639x500

Default position of new icons is as suffix:

image|690x178

But you can easily change that to put the icon in front:

image|690x228

You can also add font awesome inline, using the inline inspector. Just double click where you want to add it, and place your cursor there:

Screenshot_24|690x395

Then click the Font Awesome icon in the inline toolbar:

Screenshot_25|690x395

Select your icon from the icons picker:

Screenshot_26|690x395

And you can see the results:

Screenshot_27|690x395

You can always change the icon or its properties like size and rotation using the properties inspector:

Screenshot_28|690x395


WapplerPrevious|101x31   WapplerNext|77x31