Solved

Using Font Awesome in Universal GUI

  • 11 December 2023
  • 9 replies
  • 142 views
Harm Horstman
Rank
Userlevel 5
Badge +20

Is there a way to make use of Font Awesome icons?

Since HTML is supported in grid views and form lists, I see new opportunities for making very powerful status overviews, by making use of font awesome icons in stead of images or image lookups.  

Something like this:

 

 

icon

Best answer by Harm Horstman 22 January 2024, 09:35

View original
This topic has been closed for comments

9 replies

Freddy
Userlevel 5
Badge +16

@Harm Horstman if your icons are simple, you could create your icon with SVG code directly in HTML. I use it as well, because it's also flexible if you want to dynamically want to steer the color or content:

 

 

Something in the line of checkmark:

<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 64 64" width="64px" height="64px">
    <path x="50%" y="50%" 
          fill="none" 
          d="M7.375,33.25 c0,0,10,11.375,14.125,11.375S44.875,8,44.875,8" 
          stroke="green" 
          stroke-width="6"/>
</svg>

 

LEF - The future favors the brave. [lef.tec.br]
Harm Horstman
Rank
Userlevel 5
Badge +20

Hi Freddy,

This looks very good, thanks for the suggestion!

But I still think Font Awesome could be interesting for many scenarios. I hope there is a way to make use of that.

Mark Jongeling
Rank
Userlevel 7
Badge +23

Hey Harm,

Are you referring to be able to change the default icons the Universal GUI uses for the actions like Add, Copy, and Delete? That is currently not possible, but would certainly be a great addition for enhances customizability.

An idea for that has been created before: Replace standard icons to customize the UI (for ISV's) | Thinkwise Community (thinkwisesoftware.com)

On holiday May 6 - May 31
Harm Horstman
Rank
Userlevel 5
Badge +20

Hi Mark, no this is not my intention.

I like te make use of font-awesome icons in HTML data fields. Like my example in the initial post.

Freddy
Userlevel 5
Badge +16

Hi Mark, no this is not my intention.

I like te make use of font-awesome icons in HTML data fields. Like my example in the initial post.

@Harm Horstman if you go to the font awesome site you can copy the svg/html code of the icons you want to use in your App. This code you can put in html field or image field.

LEF - The future favors the brave. [lef.tec.br]
Harm Horstman
Rank
Userlevel 5
Badge +20

Hi @Freddy, could you give a little example about how to do this. It is not clear to me.

We tried to add the Font Awesome library to the index.html of the Universal folder. But I noticed that on refresh of the page the FA library is disappeared from the page source. I think that the DOM is rebuild by Universal’s Javascript.

So, I like to know how we could add the Font Awesome library to Universal? 

Freddy
Userlevel 5
Badge +16

Hi @Freddy, could you give a little example about how to do this. It is not clear to me.

We tried to add the Font Awesome library to the index.html of the Universal folder. But I noticed that on refresh of the page the FA library is disappeared from the page source. I think that the DOM is rebuild by Universal’s Javascript.

So, I like to know how we could add the Font Awesome library to Universal? 



@Harm Horstman I guess you have 3 options:

First is to download the css : https://fontawesome.com/download and include it in custom.css file.

Second is to include only the svgs you pretend to use.

third, add the css as a proper image using tsql, with file_name and file_data column. You can get svg code from fontawesome site and cast it to varbinary.

LEF - The future favors the brave. [lef.tec.br]
Harm Horstman
Rank
Userlevel 5
Badge +20

Thank you Freddy, we will try that.

Harm Horstman
Rank
Userlevel 5
Badge +20

@Freddy,

It works!

We added fontawesome to the Universal folder and added this line to custom.css:
@import url("fontawesome/css/all.css");

This makes it now very easy to do things like below (HTML in a card list)
 


 

Terms & ConditionsCookie settings