Unigui 自定义FontAwesome与自定义字体

本人要解决的问题如标题所示：

根据SF的组件TUniSFLabel进行修改，增加一个FTSIcon类，FTSIcon类如下：

  TTSIcon = class(TPersistent)
  private
    FIconName : string;             //Aw Icon图标名字
    FClassName: string;             //属于CSS中那个类名
    FIconType : string;             //是那种ICON 类型, s,l,r,d
    FFontSize : string;             //当前字体大小
    FEnable   : Boolean;            //是否使能当前功能
    FSexyClass: string;
    FSpanClass: string;
    FSpanNum  : Integer;            //SPAN的数量
    FUseType  : Integer;            //使用那种类型，类型0是Aw字体。
  published
    property IconName:  string   read FIconName write FIconName ;
    property ClassName:  string   read FClassName write FClassName ;
    property IconType:  string   read FIconType write FIconType ;
    property FontSize:  string   read FFontSize write FFontSize ;
    property SexyClass:  string   read FSexyClass write FSexyClass ;
    property SpanClass:  string   read FSpanClass write FSpanClass ;
    property UseType:  Integer   read FUseType write FUseType ;
    property SpanNum:  Integer   read FSpanNum write FSpanNum ;

    property Enable: Boolean read FEnable write FEnable default False;
  end;

相关参数说明如下：

TSICon
Enable : 当前控制是否使能，如果不使能则使用组件的FAIcon的属性进行设置。
UseType ：当前使用方式，分为以下几种。
　　A): 0: 使用模式0，采用aw方式显示，有效属性为。ClassName,IconName,IconType,FontSize. 
　　　　a):其中IconType,表示使用的是那种类型。 取值为s,l,b,r.
　　　　b):ClassName设置当前使用的类的名字。
　　　　c):IconName当前使用的iocn的名字。
　　　　d):FontSize为字体大小。
　　B): 1，2: 使用模式1或2
　　　　a): 当为1时 使用SexBtn模式。 有效的参数为SexyClass，SpanClass ，SpanNum。SexyClass为最外层的属性，SpanClass为内层。
　　　　b): 当为2时 使用TsBtn模式。 有效的参数为SexyClass，SpanClass ，SpanNum。SexyClass为最外层的属性，SpanClass为内层。

修改后的TUniSFLabel文件如下：

interface

uses
  uniLabel, Classes, sysUtils, UniGUIInterfaces, UniSFCore, uniGUIJSInterface, uniGUITypes, uniGUIClasses, UniGUIAbstractClasses;

type
  [ComponentPlatformsAttribute(pidWin32 or pidWin64)]
  TUniSFLabel = class(TUniCustomLabel)
  private
    FStyleLabel: TUniSFStyleLabel;
    FFAIcon: TFAIcon;
    FTSIcon:TTSIcon;
    procedure setStyleLabel(const Value: TUniSFStyleLabel);
    function GetAbout: string;
    procedure SetAbout(const Value: string);
  protected
    procedure SetJSCaption(const Value: string); override;
    property TextConversion;
    {Being painted}
    procedure Paint; override;
    procedure WebCreate; override;
  published
    property About: string read GetAbout write SetAbout stored False;
    property Alignment;
    property AutoSize default True;
    property Caption;
    property Align;
    property Anchors;
    property ParentFont;
    property Font;
    property ParentColor;
    property Color;
    property ClientEvents;
    property Transparent;
    property TabOrder;
    property ScreenMask;
    property LayoutConfig;
    property StyleLabel: TUniSFStyleLabel read FStyleLabel write setStyleLabel;
    property OnDblClick;
    property OnClick;
    property OnMouseDown;
    property OnMouseUp;
    property OnMouseEnter;
    property OnMouseLeave;
    property OnAjaxEvent;
    property FAIcon: TFAIcon read FFAIcon write FFAIcon;
    property TSIcon: TTSIcon read FTSIcon write FTSIcon;
  public
    constructor Create(AOwner: TComponent); override;
    destructor Destroy; override;
  end;


implementation

uses
  uniGUIServer;

// ------------------------------------------------------------------------------


{ TUniSFLabel }

constructor TUniSFLabel.Create(AOwner: TComponent);
begin
  inherited;
  AutoSize := True;
  FStyleLabel := TUniSFStyleLabel.Create;
  FFAIcon := TFAIcon.Create;
  FFAIcon.IconName := 'fa-abacus';
  FFAIcon.ClassName := 'ts';
  FFAIcon.IconType := 's';

  FTSIcon :=  TTSIcon.Create;
  FTSIcon.IconName := 'fa-abacus';
  FTSIcon.ClassName := 'ts';
  FTSIcon.IconType := '';
  FTSIcon.FontSize := 'sf-48';
  FTSIcon.UseType := 0;
end;

destructor TUniSFLabel.Destroy;
begin
  FStyleLabel.Free;
  FFAIcon.Free;
  inherited;
end;

function TUniSFLabel.GetAbout: string;
begin
  Result := GetUniSFVersion(cnLabel);
end;

procedure TUniSFLabel.Paint;
begin
  if FStyleLabel.Model = lm_required then
    Text := '* ' + Caption
  else
    Text := Caption;
  inherited;
end;

procedure TUniSFLabel.SetAbout(const Value: string);
begin
 //
end;

procedure TUniSFLabel.SetJSCaption(const Value: string);
var
  vStyle: string;
  vCaption: string;
  i,j     : Integer;
begin
  vCaption := Caption;
  if FTSIcon.Enable then
  begin
    if FTSIcon.UseType = 0 then
    begin
      vCaption := format('<i class="fa%s %s  fa-%s"></i>', [FTSIcon.IconType,FTSIcon.IconName,FTSIcon.FontSize]) + vCaption;
      vStyle := Format('<span class="f-%s f-%s-btn %s">%s</span>', [FTSIcon.ClassName,FTSIcon.ClassName,FTSIcon.SpanClass, vCaption]);
    end
    else if ((FTSIcon.UseType = 1) or (FTSIcon.UseType = 2)) then
    begin
      if FTSIcon.SpanNum <> 0 then
      begin
        vCaption := format('<span class="%s">%s</span>', [FTSIcon.SpanClass,vCaption]);
        j := FTSIcon.SpanNum-1;
        for i := 0 to j-1 do
          vCaption := '<span>'+vCaption+'</span>';
      end;
//      vCaption := format('<span><span><span class="%s">%s</span></span></span>', [FTSIcon.SpanClass,vCaption]);
      if FTSIcon.UseType = 1 then
        vStyle := Format('<button class="sexybutton %s">%s</button>', [FTSIcon.SexyClass, vCaption])
      else
        vStyle := Format('<button class="tsbutton %s">%s</button>', [FTSIcon.SexyClass, vCaption])
    end
    else if (FTSIcon.UseType = 3) then
    begin
      vCaption := format('<i class="%s"></i>', [FTSIcon.SpanClass]) + vCaption;
      vStyle := Format('<span class="%s">%s</span>', [FTSIcon.ClassName,vCaption]);
    end;
         
  end
  else
  begin
    if FFAIcon.Icon <> fa_none then
    begin
      if FStyleLabel.Model = lm_badge_btn then
      begin
         vCaption := '';
         Height := 40;
         Width :=40;
         AutoSize := false;
         FFAIcon.Size := fs_24;
      end;

      if vCaption <> '' then
        vCaption := ' ' + vCaption;
      if FStyleLabel.Model = lm_badge_btn then
       vCaption := format('<i class="fa %s fa-badge-sf-24 %s"></i>', [FontAwesomeToStr(FFAIcon.Icon),  FontColorToStr(FFAIcon.Color)]) + vCaption
      else if FStyleLabel.Model = lm_ts_btn then
       vCaption := format('<i class="fa %s  %s"></i>', [FFAIcon.IconName,  FontSizeToStr(FFAIcon.Size)]) + vCaption
  //     vCaption := format('<i class="fa %s  %s"></i>', [FontAwesomeToStr(FFAIcon.Icon),  FontSizeToStr(FFAIcon.Size)]) + vCaption
      else if FStyleLabel.Model = lm_fas_btn then
       vCaption := format('<i class="fa%s %s  %s"></i>', [FFAIcon.IconType,FFAIcon.IconName,  FontSizeToStr(FFAIcon.Size)]) + vCaption
      else
       vCaption := format('<i class="fa %s %s %s"></i>', [FontAwesomeToStr(FFAIcon.Icon), FontSizeToStr(FFAIcon.Size), FontColorToStr(FFAIcon.Color)]) + vCaption;
    end;

    if FStyleLabel.Model = lm_required then
      vStyle := '<i class="fa fa-asterisk fa-sf-required"></i>' + vCaption
    else if (Ord(FStyleLabel.Model) > 1) and (Ord(FStyleLabel.Model) < 12) then
      vStyle := Format('<span class="f-label %s %s">%s</span>', [LabelThemeToStr(FStyleLabel.Theme), LabelModelToStr(FStyleLabel.Model), vCaption])
    else if FStyleLabel.Model = lm_badge then
      vStyle := Format('<span class="f-badge %s">%s</span>', [LabelThemeToStr(FStyleLabel.Theme, true), vCaption])
    else if FStyleLabel.Model = lm_badge_btn then
      vStyle := Format('<span class="f-badge f-badge-btn %s">%s</span>', [LabelThemeToStr(FStyleLabel.Theme, true), vCaption])
    else if FStyleLabel.Model = lm_ts_btn then
      vStyle := Format('<span class="f-%s f-%s-btn ">%s</span>', [FFAIcon.ClassName,FFAIcon.ClassName, vCaption])
    else if FStyleLabel.Model = lm_fas_btn then
      vStyle := Format('<span class="f-%s f-%s-btn ">%s</span>', [FFAIcon.ClassName,FFAIcon.ClassName, vCaption])
    else
      vStyle := vCaption;
  end;


  JSProperty('html', [vStyle, False], 'setText');
end;

procedure TUniSFLabel.setStyleLabel(const Value: TUniSFStyleLabel);
begin
  FStyleLabel := Value;
end;

procedure TUniSFLabel.WebCreate;
begin
  inherited;
  TextConversion := txtHTML;
end;

initialization
//增加的CSS文件位置
  UniAddCSSLibrary('uniSFJS/thinksign/ts_wix.css?' + FenixCSSVersion, False, [upoFolderUni, upoPlatformBoth]);
  UniAddCSSLibrary('uniSFJS/SexyButtons/sexybuttons.css?' + FenixCSSVersion, False, [upoFolderUni, upoPlatformBoth]);
  UniAddCSSLibrary('uniSFJS/fenix/fenix.css?' + FenixCSSVersion, False, [upoFolderUni, upoPlatformBoth]);
  UniAddCSSLibrary('uniSFJS/font-awesome/css/fontawesome-all.min.css', False, [upoFolderUni, upoPlatformBoth]);
end.

　　

到这里，然后主程序，只要设置UniSFLabel的TTSIcon 即可显示对应的组件。