1

i have button and want to set an icon to it along with the text inside it. their is no property to add icon to button like in smartGwt .. any idea how to achieve it please help.

Ekata
  • 259
  • 2
  • 7
  • 21
  • 1
    Do look at GWT-Bootstrap also, that'll simplify a lot of the work for you. – nikhil Feb 27 '13 at 08:52
  • If you found the solution for this from the below answers, accept and upvote the answers. If you got your own answer, put that down and accept it. This will help other users who are looking answers for similar type of questions. – Abhijith Nagaraja Sep 25 '14 at 23:07

6 Answers6

5

There are many ways of achieving this.

Way 1 : Easy way

Just set the background image via code. myButton.getElement().getStyle().setBackgroundImage("path");

Way 2: Another easy way

Set your own html myButton.setHtml("Pass the html string");

Way 3: Easy but gives more control

myButton.addStylename("buttonStyle")

Use css to style this

.buttonStyle{
color : red;
}

Way 4: Best way according to me

Create your own split button wrapping it around a flowpanel or horizontalPanel, with image as your first widget and button as your another widget. This gives you additional control on image and as well as button. You can have your click handler on image as well as button and you can style each one of them individually.

Abhijith Nagaraja
  • 3,370
  • 6
  • 27
  • 55
1

This is how I achieved setting an icon in my get:button.

Add an extra style class hook, mine below is btn-fa-group to your gwt button. If you use the attribute 'addStyleNames' you can define them in your stylesheet and have multiple classes. 

<g:Button text=" Post Your Answer" enabled="false" ui:field="showPostButton" addStyleNames="btn btn-default btn-fa-group" />

Now in your CSS define the following declaration:

btn-fa-group:before {
    color: #333333;
    content: "\f0c0";
    display: inline-block;
    font-family: "fontawesome";
}

Some important things to note; don't forget the before selector, make sure the unicode starts with a slash and have fontAwesome installed. Alternatively you can use another glyph icon if you have the font installed.

jamesy
  • 111
  • 1
0

You can set innerhtml with image in button i.e. 

 Button button=new Button("<image src='abc.jpg' width='200px' height='300px' />Ok");
bNd
  • 7,512
  • 7
  • 39
  • 72
  • I would recommend safehtml api's to be used along with Bhumika's suggestion. Button(SafeHtml html, ClickHandler handler) – appbootup Feb 07 '13 at 06:00
0
Button bt = new Button();

bt.getElement().getStyle().setBackgroundImage("url('path/to/ur/image/imagename.extention')");

also set size of background image wrt to the size of button

bt.getElement().getStyle().setProperty("backgroundSize","30px");
Dipak
  • 6,532
  • 8
  • 63
  • 87
0

Add a Css Class to your Button is probalby the best solution.

button.addStyleName("ButtonIcon");

How to define the CSS and HTML you can read here.

Community
  • 1
  • 1
Sam
  • 2,707
  • 1
  • 23
  • 32
-1

Yes ,you can .Gwt have a SmartGwt type button called push buttopn

com.google.gwt.user.client.ui.PushButton

You can pass Image object to it as below 

Image  image = new Image(GWT.getModuleBaseURL() + "/images/search-arrow.png");
RootPanel.get().add(new PushButton(image));
Suresh Atta
  • 120,458
  • 37
  • 198
  • 307