HtmlMemo Inline text with Font Awesome Symbols - How ?

[andyhill]

  UniServerModule.CustomFiles.Add('<link rel="stylesheet" href="fonts/css/all.css">');
  s:= 'i { '+
        '    color: red; '+
        '    vertical-align: sub; '+
        '    font-size: 50px; '+
        '  } '+
        'i::before { '+
        '  font-size: 30px; '+
        '  } ';
UniServerModule.CustomCSS.Add(s);

HtmlMemo text: '... and record (<i class="fa fa-bookmark" aria-hidden="true"></i>) location<br> ...'

Please show how to embed Font Awesome Symbols within HtmlMemo text - thanks.

[Sherzod]

2 hours ago, andyhill said:

UniServerModule.CustomFiles.Add('<link rel="stylesheet" href="fonts/css/all.css">');

Hello,

What kind of file?

[Sherzod]

3 hours ago, andyhill said:

Please show how to embed Font Awesome Symbols within HtmlMemo text - thanks.

You can try to use this approach:

1. UniHTMLMemo.ClientEvents.ExtEvents ->

function initialize(sender, eOpts) 
{
    var _link;
    document.getElementsByTagName('head')[0].childNodes.forEach(function(el) {
        if (el.tagName == 'LINK' && el.href.toString().search('/font-awesome/') > -1) {
            _link = el.outerHTML;
        }
    });

    if (_link) {
        sender.iframeEl.dom.contentDocument.head.innerHTML += _link;
    }
}

2. And add like this:

<i class="fa fa-bookmark" aria-hidden="true"></i>

 

[andyhill]

Thank you Sherzod, however it is not working, what have I missed:-

SERVERMODULE

procedure TUniServerModule.UniGUIServerModuleBeforeInit(Sender: TObject);
begin

  //////////////////////////////////////////////////////////////////////////////
  // Init
  IgnoreAccessViolation:= False;

  //////////////////////////////////////////////////////////////////////////////
  UniServerModule.CustomFiles.Add('<link rel="stylesheet" href="fonts/css/all.css">');
  //
  UniServerModule.CustomCSS.Add('.redIcon { color: red; }');
  //
  UniServerModule.CustomCSS.Add('i { '+
                                '    color: red; '+
                                '    vertical-align: sub; '+
                                '    font-size: 50px; '+
                                '  } '+

                                'i::before { '+
                                '  font-size: 30px; '+
                                '  } ');

  //////////////////////////////////////////////////////////////////////////////

EDITORFORM

procedure TfEditor.UniFormCreate(Sender: TObject);
var
  s: String;
begin

  //////////////////////////////////////////////////////////////////////////////
  HtmlMemo.ClientEvents.ExtEvents.Clear;
  // Font Awesome
  s:= 'initialize=function initialize(sender, eOpts) '+
      '{ '+
      '  var _link; '+
      '  document.getElementsByTagName(''head'')[0].childNodes.forEach(function(el) '+
      '  { '+
      '    if (el.tagName == ''LINK'' && el.href.toString().search(''/font-awesome/'') > -1) '+
      '    { '+
      '      _link = el.outerHTML; '+
      '    } '+
      '  }); '+
      '  if (_link) '+
      '  { '+
      '    sender.iframeEl.dom.contentDocument.head.innerHTML += _link; '+
      '  } '+
      '} ';
  HtmlMemo.ClientEvents.ExtEvents.Add(s);

  //////////////////////////////////////////////////////////////////////////////

 

[Sherzod]

I will check. 

[Sherzod]

7 hours ago, andyhill said:

// Font Awesome   s:= 'initialize=function initialize(sender, eOpts) '+       '{ '+       '  var _link; '+       '  document.getElementsByTagName(''head'')[0].childNodes.forEach(function(el) '+       '  { '+       '    if (el.tagName == ''LINK'' && el.href.toString().search(''/font-awesome/'') > -1) '+       '    { '+       '      _link = el.outerHTML; '+       '    } '+       '  }); '+       '  if (_link) '+       '  { '+       '    sender.iframeEl.dom.contentDocument.head.innerHTML += _link; '+       '  } '+       '} ';   HtmlMemo.ClientEvents.ExtEvents.Add(s);

This is correct.

7 hours ago, andyhill said:

////////////////////////////////////////////////////////////////////////////// UniServerModule.CustomFiles.Add('<link rel="stylesheet" href="fonts/css/all.css">'); // UniServerModule.CustomCSS.Add('.redIcon { color: red; }'); // UniServerModule.CustomCSS.Add('i { '+ ' color: red; '+ ' vertical-align: sub; '+ ' font-size: 50px; '+ ' } '+ 'i::before { '+ ' font-size: 30px; '+ ' } '); //////////////////////////////////////////////////////////////////////////////

Not sure,
I have no "fonts/css/all.css" to check. Please make a simple testcase if possible.

[andyhill]

"fonts" are the free font awesome files

fonts.zip

[Sherzod]

9 minutes ago, andyhill said:

"fonts" are the free font awesome files

fonts.zip

OK Andy,

I guess you don't need to include this, because, we already include the font in the initialize event: initialize=function initialize(sender, eOpts)...

8 hours ago, andyhill said:

however it is not working, what have I missed

If it doesn't work for you, please create a full test app to check.