GWT Custom Button with Icon above Text
===

I want to create a button with an icon and text, where icon is above text.

Looking for information I've found this [answer from Juri][1].

With it I've created my own SquareButton class like below:

    import com.google.gwt.event.dom.client.ClickHandler;
    import com.google.gwt.resources.client.ImageResource;
    import com.google.gwt.user.client.DOM;
    import com.google.gwt.user.client.Element;
    import com.google.gwt.user.client.ui.Button;
    import com.google.gwt.user.client.ui.Image;

    /**
     * Square Button class
     * @author julio.palma.vazquez
     *
     */
    public class SquareButton extends Button {
    
        /** Text to show. */
        private String text;

        /**
         * Constructor.
         */
        public SquareButton() {
            super();
        }
    
        public SquareButton(String text, ClickHandler clickHandler, ImageResource imageResource) {
            super(text, clickHandler);
            setResource(imageResource);
            setPixelSize(60, 60);
        }
 
        /**
         * Set image resource.
         * @param imageResource image resource
         */
        public void setResource(ImageResource imageResource){
            Image img = new Image(imageResource);
            String definedStyles = img.getElement().getAttribute("style");
            img.getElement().setAttribute("style", definedStyles + "; vertical-align:top;");
            DOM.insertBefore(getElement(), img.getElement(), DOM.getFirstChild(getElement()));
        }
 
        /**
         * Set text.
         * @param text text to show
         */
        @Override
        public void setText(String text) {
            this.text = text;
            Element span = DOM.createElement("span");
            span.setInnerText(text);
            span.setAttribute("style", "vertical-align:bottom; text-align: center;");
       
            DOM.insertChild(getElement(), span, 0);
       }
 
       /**
        * Get text.
        * @return text to show
        */
       @Override
       public String getText() {
           return this.text;
       }
    }

Unfortunatelly it doesn't work as I expect and output text above image.

Could you please give me a hand?


  [1]: http://stackoverflow.com/questions/1853042/creating-custom-button-in-gwt
  [2]: http://i.stack.imgur.com/hd0QO.png