[SOLVED] FontAwesome icons support?
lazarus / 39-Graphics

----------------------------------------------------------------------
Dibo · 2014-11-11 16:08

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][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i uses
fpimage, LCLType, IntfGraphics, GraphType,  EasyLazFreeType,
 LazFreeTypeIntfDrawer;   function CreateFAIcon(constref ACode:
String; ASize: Byte=16): TBitmap;var  img: TLazIntfImage;  d:
TIntfFreeTypeDrawer;  f: TFreeTypeFont;begin  Result :=
TBitmap.Create;  img := TLazIntfImage.Create(0,0, [riqfRGB]);  d :=
TIntfFreeTypeDrawer.Create(img);  f := TFreeTypeFont.Create;  try   
f.Name := 'FontAwesome.ttf';    f.SizeInPixels := ASize;    f.Hinted
:= true;    f.ClearType := true;    f.Quality := grqHighQuality;   
f.SmallLinePadding := false;    img.SetSize(ASize,ASize);   
//d.FillPixels(TColorToFPColor(clWhite));   
//d.FillPixels(colTransparent);   
d.FillPixels(TColorToFPColor(clFuchsia));   
//d.FillPixels(TColorToFPColor(clNone));     d.DrawText(ACode, f,
ASize, ASize, colBlack, [ftaRight, ftaBottom]);    
Result.LoadFromIntfImage(img);    Result.Transparent := True;   
Result.TransparentColor := clFuchsia;  finally    f.Free;    d.Free; 
 img.Free;  end;end; 
And usage:
Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i procedure
TForm1.SpeedButton1Click(Sender: TObject);var b: TBitmap;begin  b :=
CreateFAIcon(#239#131#185, 50);  try    SpeedButton1.Glyph.Assign(b); 
finally    b.Free;  end;end;   
Regards

----------------------------------------------------------------------
Dibo · 2014-11-11 16:41

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][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i function
CreateFAIcon(constref ACode: String; ASize: Byte=16): TBitmap;var 
img: TLazIntfImage;  d: TIntfFreeTypeDrawer;  f: TFreeTypeFont;begin 
Result := TBitmap.Create;  img := TLazIntfImage.Create(0,0, [riqfRGB,
riqfAlpha]);  d := TIntfFreeTypeDrawer.Create(img);  f :=
TFreeTypeFont.Create;  try    f.Name := 'FontAwesome.ttf';   
f.SizeInPixels := ASize;    f.Hinted := true;    f.ClearType := true; 
  f.Quality := grqHighQuality;    f.SmallLinePadding := false;   
img.SetSize(ASize,ASize);    d.FillPixels(colTransparent);    
d.DrawText(ACode, f, ASize, ASize, colBlack, [ftaRight, ftaBottom]);  
  Result.LoadFromIntfImage(img);  finally    f.Free;    d.Free;   
img.Free;  end;end; 
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 · 2017-04-17 10:47

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][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i unit
Unit1; {$mode objfpc}{$H+} interface uses  Classes, SysUtils,
FileUtil, Forms, Controls, Graphics, Dialogs, ExtCtrls,  fpimage,
LCLType, IntfGraphics, GraphType,  EasyLazFreeType,
 LazFreeTypeIntfDrawer, Buttons;type   { TForm1 }   TForm1 =
class(TForm)    Panel1: TPanel;    Panel2: TPanel;    Panel3: TPanel; 
  SpeedButton1: TSpeedButton;    procedure Panel2Click(Sender:
TObject);    procedure SpeedButton1Click(Sender: TObject);  private  
{ private declarations }  public    { public declarations }  end; var 
Form1: TForm1; implementation {$R *.lfm} { TForm1 } function
CreateFAIcon(constref ACode: String; ASize: Byte=16): TBitmap;var 
img: TLazIntfImage;  d: TIntfFreeTypeDrawer;  f: TFreeTypeFont;begin 
Result := TBitmap.Create;  img := TLazIntfImage.Create(0,0, [riqfRGB,
riqfAlpha]);  d := TIntfFreeTypeDrawer.Create(img);  f :=
TFreeTypeFont.Create;  try    f.Name := 'FontAwesome.ttf';   
f.SizeInPixels := ASize;    f.Hinted := true;    f.ClearType := true; 
  f.Quality := grqHighQuality;    f.SmallLinePadding := false;   
img.SetSize(ASize,ASize);    d.FillPixels(colTransparent);    
d.DrawText(ACode, f, ASize, ASize, colBlack, [ftaRight, ftaBottom]);  
  Result.LoadFromIntfImage(img);  finally    f.Free;    d.Free;   
img.Free;  end;end; procedure TForm1.Panel2Click(Sender:
TObject);begin  Close;end; procedure TForm1.SpeedButton1Click(Sender:
TObject);var b: TBitmap;begin  b := CreateFAIcon(#239#131#185, 50); 
try    SpeedButton1.Glyph.Assign(b);    //spe  finally    b.Free; 
end; end; end.

----------------------------------------------------------------------
majid.ebru · 2017-04-19 12:15

help please.
.

----------------------------------------------------------------------
Dibo · 2017-04-19 13:18

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 · 2017-06-20 21:11

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][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i     f.Name
:=  Application.Location + 'fontawesome-webfont.ttf';

----------------------------------------------------------------------
majid.ebru · 2017-06-21 05:16

Oh my God
.
Yes
.
it Works.

thank you very much

----------------------------------------------------------------------
kirchfritz · 2020-05-14 12:23

Update:
if your icon is coded by HTML with  then you can use
Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i b :=
CreateFAIcon(widechar($f0f9), 50);
instead of
Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i b :=
CreateFAIcon(#239#131#185, 50);