Awesome Font

Targets Web
1

Hi all,

In Xojo Web app, I can use Awesome font in WebLabels or WebButtons. Is it possible to put them in WebListBox?

2

Diiiiiid you try? It would be much the same process.
(if you did try and it didn’t work, what did you try?)

3

For weblabel or webbutton, I need to use JavaScript to display the font, but sorry I don’t know how to execute JavaScript for a cell of weblist

4

… what javascript?

You should be able to use the basic and preferred method of with DOM objects and the FontAwesome classes as described in their documentation here: https://fontawesome.com/how-to-use/

First, this needs to go in your HTMLHeaders to load the FontAwesome font into your page:

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

(if you are coming to this post in the distant future, make sure you’re getting the latest up to date version from the CDN. Check this post’s date versus whatever the date is for you today, time traveler)

Then use the Xojo <raw></raw> tags to stick the icons in with span elements as described by the FA docs:

<raw><span class="{font awesome glyph identifier}"></span></raw>

Let us know if this doesn’t work!

5

I learnt this from a thread from this forum, and here it is how I display awesome font now, in the open event of the WebButton :

‘horizontal Align
Me.ExecuteJavaScript("var elem = document.getElementById(’"+ Me.ControlID + “’); elem.setAttribute(‘align’, ‘center’);”)

‘vertical align
ExecuteJavaScript("document.getElementById(’" + me.ControlID + “’).innerHTML = '<i class=”“fa fa-sign-out”" style="“color:#FFF; font-size:20px;margin-top:6px;”“line-height:”+ cstr(me.Height) + “px; vertical-align:middle;”"> " + me.caption + “’;”)

6

Hi Tim,

Your way is much easier than the one I am using, and it works on WebListBox also, thanks very much.

7

Unfortunately it doesn’t work on WebButton.Caption

8

Can you use the raw tag show html in the Caption?

9

@Hal Gumbert No, I copied the same piece of code from a label to a button, the button shows a corrupted text with some sort of “codes”; sorry that I do not know how to describe correctly, it does not display anyway.

10

Did you try this?

<i class="“fa fa-sign-out”">

11

Yes, but it seems that code works for a WebLabel doesn’t work for WebButton. I tried it works for WebList.cell but I didn’t try for checkbox or webradios

12

WebButton isn’t listed on the supported controls for the <raw> tag, so that’s likely why. You’ll have to continue to use the Javascript way until that changes. File a feedback report :slight_smile:

13

I tried <i class="“fa fa-sign-out”"> for WebLabel and it doesn’t work. Does anyone have an example that works on WebLabels that works with tags?

14

Jan, which version of Xojo are you using? The blog post Hal mentioned says that WebLabel supports the raw tag, but only as of 2017r1 and newer.

15

Tim. I’m using 2017R3, so that is not the problem. The example from Tony using horisontal and vertical alignment works fine, but the “simple” way with tags doesn’t work.

Maybe the problem is the line in the HTMLHeaders I’m using?

16

If the line in the HTML Headers isn’t what’s above, I can’t help you there. It could quite possibly be your issue though, especially if you are using a different version of FontAwesome.

17

Seems to me you are missing other code necessary to make it work.

https://fontawesome.com/get-started/web-fonts-with-css

18

I put this in the HTMLHeader:

and put this in the WebLabel.Shown:

me.text = “<i class=”“fa fa-users fa-lg”" style=““line-height:”+ cstr(me.Height) + “px; vertical-align:middle;””>"

19

Thank’s a lot Tony, that worked :slight_smile: