Using Font Awesome in TsWebBrowser

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #37880
    HeDiBo
    Participant

    I have a couple of help screens that use a TsWebBrowser component to show their text.

    I would like to show some icons of buttons in the text. These icons are selected from the Font Awesome set that you provided in the TsCharImageList component.

    However, I have absolutely no idea how to do this, such that their color will be correct for both light and dark themes (I can insert them as images of course).

    Can you give me a clue how to go about doing this?

    I have downloaded the complete Font Awesome set from the internet. There are a lot of CSS related files in the set, but I have no idea how to use them.

    I also installed the font as a normal font in my system. So I could add it to a TsFontStore if needed.

    #58093
    HeDiBo
    Participant

    I found out how to write HTML that shows Font Awesome special characters:

    Code:

    Test Font Awesome

    body {
    font-family: “Trebuchet MS”;
    }
    #faw {
    font-family: “Font Awesome 5 Free Solid”;
    vertical-align: -10%;
    }

    This is the heading

    This is the next sign.

    This will work, if the font is installed on the system.

    In my application I implemented the font through a TsFontStore component. Now it will work if I use the font in my regular program. However, if I use this text in a TsWebBrowser, the font is not usable (unless of course it is installed in the system).

    I'm not sure if this has something to do with the font being local to a process and the web browser operating in a separate process.

    How can I let the web browser know also about the font. And the print server as well, because my web pages all are printable.

    Maybe TsFontStore needs an augmentation to make some fonts known system wide?

    #58121
    Support
    Keymaster

    You can try this way:

    Add this font in the css file:

    Code:
    @font-face {
    font-family: 'FontAwesome';
    src: url('fontawesome.ttf');
    }

    .awesomechar {font-family: 'FontAwesome';}

    In the html:

    Code:
Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.