How to use icon fonts or svg for widget icon

classic Classic list List threaded Threaded
4 messages Options
Reply | Threaded
Open this post in threaded view
|

How to use icon fonts or svg for widget icon

paragasu
Is it possible to use svg as icon for button?
I wonder if it is possible to use icon fonts & how to accomplish this in qooxdoo?



------------------------------------------------------------------------------
Download BIRT iHub F-Type - The Free Enterprise-Grade BIRT Server
from Actuate! Instantly Supercharge Your Business Reports and Dashboards
with Interactivity, Sharing, Native Excel Exports, App Integration & more
Get technology previously reserved for billion-dollar corporations, FREE
http://pubads.g.doubleclick.net/gampad/clk?id=164703151&iu=/4140/ostg.clktrk
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: How to use icon fonts or svg for widget icon

MartinWittemann
Administrator
Hey,
> Is it possible to use svg as icon for button?
> I wonder if it is possible to use icon fonts & how to accomplish this in qooxdoo?

The icon of buttons are div tags in qooxdoo having a background image. So it should be possible to add a text (read font icon) as content of the div. But the button will not render the div if no icon is given so it would be necessary to load a blank image if you want to use the icon div (including its layout capabilities). Additionally, you most likely have to manage the size of the icon by yourself.

If you only want it on the left side anyway, I would go with a rich label including a span with the font icon in the beginning.

Regards,
Martin
------------------------------------------------------------------------------
Download BIRT iHub F-Type - The Free Enterprise-Grade BIRT Server
from Actuate! Instantly Supercharge Your Business Reports and Dashboards
with Interactivity, Sharing, Native Excel Exports, App Integration & more
Get technology previously reserved for billion-dollar corporations, FREE
http://pubads.g.doubleclick.net/gampad/clk?id=164703151&iu=/4140/ostg.clktrk
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: How to use icon fonts or svg for widget icon

Cajus Pollmeier
In reply to this post by paragasu
Having SVGs is really nice, because you don't have to act with high DPI
devices. For that reason I'm using SVG images as (also button) icons.

The only problems I had is that the generator does not extract the SVG
dimensions for the included resource. So you'll get an exception when qx
tries to do its layouting.

You can work around this by specifying the desired dimension to the
"icon" child control directly after you've created the button:

  var foo = new qx.ui.form.Button("foo", "wherever/bar.svg");
  foo.getChildControl("icon").set({width: 64, height: 64});

The best thing would be to add support for extracting the SVG stored
dimensions in the generator - or if it's already there, check why it's
not working. Sadly I had no time to dig into that yet...

Am Sonntag, den 14.12.2014, 17:42 +0800 schrieb paragasu:

> Is it possible to use svg as icon for button?
> I wonder if it is possible to use icon fonts & how to accomplish this
> in qooxdoo?
>
>
>
>
> ------------------------------------------------------------------------------
> Download BIRT iHub F-Type - The Free Enterprise-Grade BIRT Server
> from Actuate! Instantly Supercharge Your Business Reports and Dashboards
> with Interactivity, Sharing, Native Excel Exports, App Integration & more
> Get technology previously reserved for billion-dollar corporations, FREE
> http://pubads.g.doubleclick.net/gampad/clk?id=164703151&iu=/4140/ostg.clktrk
> _______________________________________________ qooxdoo-devel mailing list [hidden email] https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

------------------------------------------------------------------------------
Download BIRT iHub F-Type - The Free Enterprise-Grade BIRT Server
from Actuate! Instantly Supercharge Your Business Reports and Dashboards
with Interactivity, Sharing, Native Excel Exports, App Integration & more
Get technology previously reserved for billion-dollar corporations, FREE
http://pubads.g.doubleclick.net/gampad/clk?id=164703151&iu=/4140/ostg.clktrk
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

signature.asc (180 bytes) Download Attachment
Reply | Threaded
Open this post in threaded view
|

Re: How to use icon fonts or svg for widget icon

paragasu

Thank you. It is working. I am using svg now :)

On 15 Dec 2014 16:06, "Cajus Pollmeier" <[hidden email]> wrote:
Having SVGs is really nice, because you don't have to act with high DPI
devices. For that reason I'm using SVG images as (also button) icons.

The only problems I had is that the generator does not extract the SVG
dimensions for the included resource. So you'll get an exception when qx
tries to do its layouting.

You can work around this by specifying the desired dimension to the
"icon" child control directly after you've created the button:

  var foo = new qx.ui.form.Button("foo", "wherever/bar.svg");
  foo.getChildControl("icon").set({width: 64, height: 64});

The best thing would be to add support for extracting the SVG stored
dimensions in the generator - or if it's already there, check why it's
not working. Sadly I had no time to dig into that yet...

Am Sonntag, den 14.12.2014, 17:42 +0800 schrieb paragasu:
> Is it possible to use svg as icon for button?
> I wonder if it is possible to use icon fonts & how to accomplish this
> in qooxdoo?
>
>
>
>
> ------------------------------------------------------------------------------
> Download BIRT iHub F-Type - The Free Enterprise-Grade BIRT Server
> from Actuate! Instantly Supercharge Your Business Reports and Dashboards
> with Interactivity, Sharing, Native Excel Exports, App Integration & more
> Get technology previously reserved for billion-dollar corporations, FREE
> http://pubads.g.doubleclick.net/gampad/clk?id=164703151&iu=/4140/ostg.clktrk
> _______________________________________________ qooxdoo-devel mailing list [hidden email] https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel


------------------------------------------------------------------------------
Download BIRT iHub F-Type - The Free Enterprise-Grade BIRT Server
from Actuate! Instantly Supercharge Your Business Reports and Dashboards
with Interactivity, Sharing, Native Excel Exports, App Integration & more
Get technology previously reserved for billion-dollar corporations, FREE
http://pubads.g.doubleclick.net/gampad/clk?id=164703151&iu=/4140/ostg.clktrk
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel


------------------------------------------------------------------------------
Dive into the World of Parallel Programming! The Go Parallel Website,
sponsored by Intel and developed in partnership with Slashdot Media, is your
hub for all things parallel software development, from weekly thought
leadership blogs to news, videos, case studies, tutorials and more. Take a
look and join the conversation now. http://goparallel.sourceforge.net
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel