Hi!
know anybody a way how to add the icons of FontAwesome in a webproject.
For example in Buttons or labels.
I tried my self with JS, but im still bad in JS.
hope you can help me!
-Lars
Go to their Github project page, get the WOFF font and follow the excellent advice of Guy Rabiller at
https://forum.xojo.com/10782-tip-embedded-woff-fonts
That solution is not the best, because I can’t use Icons AND Text in the same Object.
I solved it now by my self using JS:
1st Step:
Add this Line into the App.HTML-Header-Property:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">This snipped imports the Font-Awesome-Icons-CSS to your project
Second: paste the following code into the Object.Open-Event:
'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-camera-retro fa-lg"" style=""line-height:"+ cstr(me.Height) + "px; vertical-align:middle;""></i> " + me.Text + "';")the “fa-camera-retro” text is the Name of the Icon that you want to paste.
That’s it!
That other people find this post:
icon, web, icons, fontawesome, embed, javascript, button, label
IMPORTANT:
It’s not the OPEN-EVENT, it’s the SHOWN-EVENT!!!
Thank you for sharing Lars!
Last annotation:
this JS-Code works only with WebLabels. I didn’t found a way, how to manipulate a WebButton, because the CSS of FontAwesome do not go together with the Buttons.
So if you want to have an IconButton, you have to use a WebLabel instead and put the Action-Event-Code into the MouseUp-Event-Code.
This works perfectly for me.
If someone found a way how to manipulate the DOM of a WebButton to show an icon within, please let me know!
Last last annotation:
Xojo does not support manipulation of the DOM officialy!
[quote=146225:@Lars Lehmann]Last annotation:
this JS-Code works only with WebLabels. I didn’t found a way, how to manipulate a WebButton, because the CSS of FontAwesome do not go together with the Buttons.
So if you want to have an IconButton, you have to use a WebLabel instead and put the Action-Event-Code into the MouseUp-Event-Code.
This works perfectly for me.
If someone found a way how to manipulate the DOM of a WebButton to show an icon within, please let me know!
Last last annotation:
Xojo does not support manipulation of the DOM officialy![/quote]
I tried Guy Rabiller technique, since the FontAwesome font can display both normal characters and icons, which are only characters above &u274. No luck on buttons.
I have had fonts installed on my web host, which is yet another way of obtaining fonts. Knowing that, I created a style that uses one of my fonts and tried to apply it to labels and buttons. Fact is buttons do not honor font family style.
Since icons can be made into graphics, the best way I found to emulate a button with a frame and animation is to use a canvas, where the text and the picture can be drawn together.
Easiest way would be, when xojo would allow to add images to buttons. That can’t be that hard.
In CSS/HTML/JS it’s one of the easiest things.
My opinion is, that xojo should support such major things first and adding features like iOS or something else later.
Too late. IOS has been in the pipe for a while, and will be here before you know it.
That said, I am not sure iOS is that bad for Web Edition. All the research needed to make iOS happen brought the LLVM compiler, which will enable the other platforms 64 bit. And the sooner iOS is out of their way, the sooner the Xojo team can work on Linux 64 bit, which is next in line.
[quote=146248:@Lars Lehmann]Easiest way would be, when xojo would allow to add images to buttons. That can’t be that hard.
In CSS/HTML/JS it’s one of the easiest things.[/quote]
It maybe possible to concoct an HTML button with pictures within a WebSDK Control class, with all the code you mention in CSS and JS. In the meantime, why don’t you file a feature request in Feedback for a WebBevelButton ? That is the only way to get that.
[quote=146044:@Lars Lehmann][…].
1st Step:
Add this Line into the App.HTML-Header-Property:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">This snipped imports the Font-Awesome-Icons-CSS to your project
[…][/quote]
Is this actually correct : “//maxcdn.bootstrapcdn.com” ?
What is the difference to using “https://maxcdn.bootstrapcdn.com” ?
This is a Protocol-relative URL. If a page is accessed using https, “//” will be replaced with https automatically or http if that is whats used.