Jump to content

using Free FontAweSome OFFLine


Abaksoft

Recommended Posts

Dear Friends,

Here is a step by step way to use them.

1. Download the official kit from :   https://fontawesome.com/download         by choosing  FreeForWeb  

2. Copy this folder (uncompressed) into your files Folder 

3. In your  Unigui Project add this simple line on your ServerModule > CustomFiles :    (Thx to GerhardV)

<link rel="stylesheet" href="files/fontawesome-free-5.12.0-web/css/all.css">

    (5.12  is the current release)

4. Put an UniLabel  on Mainform  and set its TextConversion to  txtHTML

5. Use your  FontAweSome  like this   :     

procedure TMainForm.UniFormCreate(Sender: TObject);
begin
   Unilabel1.caption:='<i class="fa fa-dove" style=color:green></i>';

end;

Where :   fa  is the Class Name   and    fa-dove  is  icon's Name.  See more details in :   https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use

 

6.  Choose your icon from 1553 free icons :  https://fontawesome.com/icons?d=gallery&s=solid&m=free

 

7. You can also, use them OnLine from  public CDNs  :  by adding this simple line to the CustomFiles  (Thx to Marlon)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/css/all.css">

 

___________

Enjoy :)

OffLine_FontAwSome.zip

 

  • Like 7
Link to comment
Share on other sites

  • 1 month later...
8 hours ago, fraxzi said:

HI @Abaksoft,

 

Why the Pro looks like this on popmenu:

image.png.3902ef98765e36a0913d0357dede2372.png

 

and the Free looks like better arranged?

image.png.5b7e87d69857da948031a7567e4efc34.png

 

using "far fa-shopping-cart, etc.."  are aligned compare to using "fad fa-shopping-cart"?

Any workaround?

 

Thanks,

Frances

Hello Frances,

Mmm...i don't know :blink2:

(i don't have the Pro edition).

Are you sure your setting (parent RTL )  are the same on the 2 test cases ?

That said, i like your design :cool:

 

 

Link to comment
Share on other sites

8 hours ago, Abaksoft said:

Hello Frances,

Mmm...i don't know :blink2:

(i don't have the Pro edition).

Are you sure your setting (parent RTL )  are the same on the 2 test cases ?

That said, i like your design :cool:

 

 

Hi @Abaksoft,

Thanks! :) 

I tried your suggestion on/off on both but still the same..

image.png.fbb45474055de86a9423e948548a706f.png

Regards,

Frances

Link to comment
Share on other sites

  • 2 months later...
On 12/28/2019 at 10:31 AM, Abaksoft said:

Dear Friends,

Here is a step by step way to use them.

1. Download the official kit from :   https://fontawesome.com/download         by choosing  FreeForWeb  

2. Copy this folder (uncompressed) into your files Folder 

3. In your  Unigui Project add this simple line on your ServerModule > CustomFiles :    (Thx to GerhardV)

<link rel="stylesheet" href="files/fontawesome-free-5.12.0-web/css/all.css">

    (5.12  is the current release)

4. Put an UniLabel  on Mainform  and set its TextConversion to  txtHTML

5. Use your  FontAweSome  like this   :     


procedure TMainForm.UniFormCreate(Sender: TObject);
begin
   Unilabel1.caption:='<i class="fa fa-dove" style=color:green></i>';

end;

Where :   fa  is the Class Name   and    fa-dove  is  icon's Name.  See more details in :   https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use

 

6.  Choose your icon from 1553 free icons :  https://fontawesome.com/icons?d=gallery&s=solid&m=free

 

7. You can also, use them OnLine from  public CDNs  :  by adding this simple line to the CustomFiles  (Thx to Marlon)


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/css/all.css">

 

___________

Enjoy :)

OffLine_FontAwSome.zip

 

 

How to change the icon of place? Place on the right side.

Link to comment
Share on other sites

1 hour ago, thiagopedro said:

How to change the icon of place? Place on the right side.

You can try this code,

Unilabel1.caption:= 'Text on Left'  +'&nbsp;&nbsp;&nbsp' + '<i class="fa fa-dove" style=color:green></i>' + ' Text on rigth';

Link to comment
Share on other sites

Hello Experts,

Since Build 1530, Farshad integrated the free pack FontAwsome in Unigui.
So, it is now very easy to use them : 

in the Object Inspector :

1. Choose your Font version  :
ServerModule > FontAwsomeVersion  :   fontAws5

2. set the TextConversion property of your (caption, uniEdit, etc...) :  txtHTML 

3. Copy / Paste   the text  of your  icons (obtained from the siteweb)  :  https://fontawesome.com/icons?d=gallery&s=solid&m=free

 

Best regards

Link to comment
Share on other sites

  • 2 weeks later...
On 5/4/2020 at 5:04 AM, Abaksoft said:

Hello Experts,

Since Build 1530, Farshad integrated the free pack FontAwsome in Unigui.
So, it is now very easy to use them : 

in the Object Inspector :

1. Choose your Font version  :
ServerModule > FontAwsomeVersion  :   fontAws5

2. set the TextConversion property of your (caption, uniEdit, etc...) :  txtHTML 

3. Copy / Paste   the text  of your  icons (obtained from the siteweb)  :  https://fontawesome.com/icons?d=gallery&s=solid&m=free

 

Best regards

how  can change that free pack for a premium pack (i have a premium).

Link to comment
Share on other sites

9 hours ago, crystian said:

how  can change that free pack for a premium pack (i have a premium).

 

Hello,

Did you try ? 

 Copy / Paste   the text  of your  icons  From the PRO siteweb :  https://fontawesome.com/icons?d=gallery&s=solid&m=pro

 

Maybe (I did'nt try it) on Step 3 :

3. In your  Unigui Project add this simple line on your ServerModule > CustomFiles :   

<link rel="stylesheet" href="files/myfontawesome_pro/css/all.css">

with :  myfontawesome_pro  your uncompressed Directory Pro Edition.

Link to comment
Share on other sites

13 hours ago, Abaksoft said:

 

Hello,

Did you try ? 

 Copy / Paste   the text  of your  icons  From the PRO siteweb :  https://fontawesome.com/icons?d=gallery&s=solid&m=pro

 

Maybe (I did'nt try it) on Step 3 :

3. In your  Unigui Project add this simple line on your ServerModule > CustomFiles :   

<link rel="stylesheet" href="files/myfontawesome_pro/css/all.css">

with :  myfontawesome_pro  your uncompressed Directory Pro Edition.

yeap, then works ty ;)

Link to comment
Share on other sites

  • 2 weeks later...

procedure TDM_Server.UniGUIServerModuleBeforeInit(Sender: TObject);
begin
CustomFiles.add('\files\myfontawesome_pro\css\all.min.css');

I use this way use. And I'm recomemded always use ".min"  text added files. 'cos this files mean compressed, mean it has small size.

Link to comment
Share on other sites

  • 2 weeks later...
On 2/29/2020 at 12:51 AM, Abaksoft said:

Hello Frances,

Mmm...i don't know :blink2:

(i don't have the Pro edition).

Are you sure your setting (parent RTL )  are the same on the 2 test cases ?

That said, i like your design :cool:

 

 

Hi @Abaksoft,

The misalignment happens with 'Duotone' icons .. 

I hope anyone has a workaround.

 

Thanks,

Frances

Link to comment
Share on other sites

  • 1 year later...
  • 1 month later...

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...