Recent

Author Topic: [SOLVED] FontAwesome icons support?  (Read 6816 times)

Dibo

  • Hero Member
  • *****
  • Posts: 1048
[SOLVED] FontAwesome icons support?
« on: November 11, 2014, 05:08:48 pm »
Hi,

I'm trying to use FontAwesome icons set in my application ( http://fortawesome.github.io/Font-Awesome/cheatsheet/ ) . It is based on font and source is published in many formats like: EOT (didn't check), SVG, TTF, WOFF (didn't check), OTF. Everything fails except TTF (true type font). I have problem with true type transparent. Here is what I tried so far:

1. The best way would be to use FontAwesome as system font. But I can't force user to install font before run my application. So I searched for runtime routines. I found AddFontResource but it is from windows unit and I need cross-platform solution. Could not find anything for Qt/Gtk widgetset. As system font it works perfect for any kind of controls like TLabel, TSpeedButton etc.

2. The easiest way would be just install font on my develop environment, use this font in Gimp/Photoshop and save as PNG icon. I'll use this solution when everything else fail. But I insist to use it as native FPC

3. Finally I got it working with EasyLazFreeType. The problem is with transparent background. Only way I found is fill background with clFuchsia color and use it as TBitmap.TransparentColor. But it is 0 or 1so in place where antialiased pixels are drawed I still see fuchsia color (look at attached image). I tried with mask property but no result. There is a lot of layers: drawer, bitmap, interface image. Maybe I'm doing something wrong. Any idea? Here is working example (you need FontAwesome.ttf from attachments)

Code: Pascal  [Select][+][-]
  1. uses fpimage, LCLType, IntfGraphics, GraphType,
  2.   EasyLazFreeType,  LazFreeTypeIntfDrawer;  
  3.  
  4. function CreateFAIcon(constref ACode: String; ASize: Byte=16): TBitmap;
  5. var
  6.   img: TLazIntfImage;
  7.   d: TIntfFreeTypeDrawer;
  8.   f: TFreeTypeFont;
  9. begin
  10.   Result := TBitmap.Create;
  11.   img := TLazIntfImage.Create(0,0, [riqfRGB]);
  12.   d := TIntfFreeTypeDrawer.Create(img);
  13.   f := TFreeTypeFont.Create;
  14.   try
  15.     f.Name := 'FontAwesome.ttf';
  16.     f.SizeInPixels := ASize;
  17.     f.Hinted := true;
  18.     f.ClearType := true;
  19.     f.Quality := grqHighQuality;
  20.     f.SmallLinePadding := false;
  21.     img.SetSize(ASize,ASize);
  22.     //d.FillPixels(TColorToFPColor(clWhite));
  23.     //d.FillPixels(colTransparent);
  24.     d.FillPixels(TColorToFPColor(clFuchsia));
  25.     //d.FillPixels(TColorToFPColor(clNone));
  26.  
  27.     d.DrawText(ACode, f, ASize, ASize, colBlack, [ftaRight, ftaBottom]);
  28.  
  29.     Result.LoadFromIntfImage(img);
  30.     Result.Transparent := True;
  31.     Result.TransparentColor := clFuchsia;
  32.   finally
  33.     f.Free;
  34.     d.Free;
  35.     img.Free;
  36.   end;
  37. end;  
  38.  

And usage:
Code: Pascal  [Select][+][-]
  1. procedure TForm1.SpeedButton1Click(Sender: TObject);
  2. var b: TBitmap;
  3. begin
  4.   b := CreateFAIcon(#239#131#185, 50);
  5.   try
  6.     SpeedButton1.Glyph.Assign(b);
  7.   finally
  8.     b.Free;
  9.   end;
  10. end;  
  11.  

Regards
« Last Edit: November 11, 2014, 05:41:39 pm by Dibo »

Dibo

  • Hero Member
  • *****
  • Posts: 1048
Re: FontAwesome icons support?
« Reply #1 on: November 11, 2014, 05:41:25 pm »
Solved!

Missed riqfAlpha option in TLazIntfImage constructor. With this option d.FillPixels(colTransparent) is working perfect! So here is fixed code if anyone want to use it:
Code: Pascal  [Select][+][-]
  1. function CreateFAIcon(constref ACode: String; ASize: Byte=16): TBitmap;
  2. var
  3.   img: TLazIntfImage;
  4.   d: TIntfFreeTypeDrawer;
  5.   f: TFreeTypeFont;
  6. begin
  7.   Result := TBitmap.Create;
  8.   img := TLazIntfImage.Create(0,0, [riqfRGB, riqfAlpha]);
  9.   d := TIntfFreeTypeDrawer.Create(img);
  10.   f := TFreeTypeFont.Create;
  11.   try
  12.     f.Name := 'FontAwesome.ttf';
  13.     f.SizeInPixels := ASize;
  14.     f.Hinted := true;
  15.     f.ClearType := true;
  16.     f.Quality := grqHighQuality;
  17.     f.SmallLinePadding := false;
  18.     img.SetSize(ASize,ASize);
  19.     d.FillPixels(colTransparent);
  20.  
  21.     d.DrawText(ACode, f, ASize, ASize, colBlack, [ftaRight, ftaBottom]);
  22.  
  23.     Result.LoadFromIntfImage(img);
  24.   finally
  25.     f.Free;
  26.     d.Free;
  27.     img.Free;
  28.   end;
  29. end;  
  30.  

But if anyone find way to load true type at runtime into font list (like MSDN AddFontResource for windows) then I will be grateful

majid.ebru

  • Sr. Member
  • ****
  • Posts: 388
Re: [SOLVED] FontAwesome icons support?
« Reply #2 on: April 17, 2017, 12:47:47 pm »
Hi
.
i use your code , but dose not work.
.
i install font "fontawesome-webfont.ttf" in font folder windows and also copy it in project folder.
.
help me please :
.
.
Code: Pascal  [Select][+][-]
  1. unit Unit1;
  2.  
  3. {$mode objfpc}{$H+}
  4.  
  5. interface
  6.  
  7. uses
  8.   Classes, SysUtils, FileUtil, Forms, Controls, Graphics, Dialogs, ExtCtrls,
  9.   fpimage, LCLType, IntfGraphics, GraphType,
  10.   EasyLazFreeType,  LazFreeTypeIntfDrawer, Buttons;
  11. type
  12.  
  13.   { TForm1 }
  14.  
  15.   TForm1 = class(TForm)
  16.     Panel1: TPanel;
  17.     Panel2: TPanel;
  18.     Panel3: TPanel;
  19.     SpeedButton1: TSpeedButton;
  20.     procedure Panel2Click(Sender: TObject);
  21.     procedure SpeedButton1Click(Sender: TObject);
  22.   private
  23.     { private declarations }
  24.   public
  25.     { public declarations }
  26.   end;
  27.  
  28. var
  29.   Form1: TForm1;
  30.  
  31. implementation
  32.  
  33. {$R *.lfm}
  34.  
  35. { TForm1 }
  36.  
  37. function CreateFAIcon(constref ACode: String; ASize: Byte=16): TBitmap;
  38. var
  39.   img: TLazIntfImage;
  40.   d: TIntfFreeTypeDrawer;
  41.   f: TFreeTypeFont;
  42. begin
  43.   Result := TBitmap.Create;
  44.   img := TLazIntfImage.Create(0,0, [riqfRGB, riqfAlpha]);
  45.   d := TIntfFreeTypeDrawer.Create(img);
  46.   f := TFreeTypeFont.Create;
  47.   try
  48.     f.Name := 'FontAwesome.ttf';
  49.     f.SizeInPixels := ASize;
  50.     f.Hinted := true;
  51.     f.ClearType := true;
  52.     f.Quality := grqHighQuality;
  53.     f.SmallLinePadding := false;
  54.     img.SetSize(ASize,ASize);
  55.     d.FillPixels(colTransparent);
  56.  
  57.     d.DrawText(ACode, f, ASize, ASize, colBlack, [ftaRight, ftaBottom]);
  58.  
  59.     Result.LoadFromIntfImage(img);
  60.   finally
  61.     f.Free;
  62.     d.Free;
  63.     img.Free;
  64.   end;
  65. end;
  66.  
  67. procedure TForm1.Panel2Click(Sender: TObject);
  68. begin
  69.   Close;
  70. end;
  71.  
  72. procedure TForm1.SpeedButton1Click(Sender: TObject);
  73. var b: TBitmap;
  74. begin
  75.   b := CreateFAIcon(#239#131#185, 50);
  76.   try
  77.     SpeedButton1.Glyph.Assign(b);
  78.     //spe
  79.   finally
  80.     b.Free;
  81.   end;
  82.  
  83. end;
  84.  
  85. end.
  86.  
  87.  
« Last Edit: April 17, 2017, 12:49:28 pm by majid.ebru »

majid.ebru

  • Sr. Member
  • ****
  • Posts: 388
Re: [SOLVED] FontAwesome icons support?
« Reply #3 on: April 19, 2017, 02:15:51 pm »
help please.
.
 :'( :'( :'( :'(

Dibo

  • Hero Member
  • *****
  • Posts: 1048
Re: [SOLVED] FontAwesome icons support?
« Reply #4 on: April 19, 2017, 03:18:45 pm »
Can't help you because I don't use that code anymore. Just tried it now and indeed it stopped working, don't know why  :-\

ps

  • Full Member
  • ***
  • Posts: 131
    • CSS
Re: [SOLVED] FontAwesome icons support?
« Reply #5 on: June 20, 2017, 11:11:22 pm »
majid.ebru: there is no problem with code, it's working for me on all platforms (windows, linux, macos). You can place your font to app dir and modify code like this:
Code: Pascal  [Select][+][-]
  1.     f.Name :=  Application.Location + 'fontawesome-webfont.ttf';
Small simple CSS/box model implementation: https://github.com/pst2d/csscontrols/tree/dev

majid.ebru

  • Sr. Member
  • ****
  • Posts: 388
Re: [SOLVED] FontAwesome icons support?
« Reply #6 on: June 21, 2017, 07:16:35 am »
Oh my God
.
Yes
.
it Works.

thank you very much
 :-* :-* :-* :-* :-* :-* :-* :-* :-*

kirchfritz

  • New Member
  • *
  • Posts: 28
  • WIN10 LAZ 2.0.10 FPC 3.2.0
Re: [SOLVED] FontAwesome icons support?
« Reply #7 on: May 14, 2020, 02:23:46 pm »
Update:
if your icon is coded by HTML with  then you can use
Code: Pascal  [Select][+][-]
  1. b := CreateFAIcon(widechar($f0f9), 50);

instead of
Code: Pascal  [Select][+][-]
  1. b := CreateFAIcon(#239#131#185, 50);
« Last Edit: May 14, 2020, 02:56:15 pm by kirchfritz »

 

TinyPortal © 2005-2018