How to use Fontawesome at design time

[luishp]

--THIS TEXT HAS BEEN EDITED AND UPDATED AS I HAVE FOUND A SIMPLER WAY--

Font Awesome is a very convenient way to add a bunch of predesigned vector icons to your app or web.
Normal way to use it is just by adding this line of code to Project->Properties->Advanced->Custom Metadata->Head

Code: Select all

<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>

But this way has a problem as icons are only visible at run-time (once the app is compiled) and not at design time (into NeoAppBuilder design area).
To solve this just add a container object and right click on it to edit HTML property.
Add this code:

Code: Select all

<style>
@import url(https://use.fontawesome.com/releases/v5.0.8/css/all.css);
</style>

Now you can use any HTML icon code to show the corresponding icon ie:

Code: Select all

<i class="fas fa-ambulance"></i>

Here is a list of available icons: https://fontawesome.com/icons?d=gallery&m=free
All the icons will be also available into NAB as a list in the Properties panel->Advanced->css-class

[farhad2008]

Thank you