Font Awesome Icons in com.smartgwt.client.widgets.Label

[vitor.eduardods]

Hey folks, this is my first post at this forum. I am a newbie on SmartGWT. I would like to add a FontAwesome icon in a Label. My intention is to create a traffic light. Accordingly the status changes, the label shows a different icon. However, I do not want to use images (.setIcon property).

I found out this post. Nonetheless, I am unable to apply on my case. The main problem is: How to create the CSS, and how to set it on my component?

Please, any help would be very welcome.

thanks in advance.

Vitor Eduardo

[rn]

A very simple approach is to add the html/css directly in your label:

Label label = new Label("<i class='fa fa-cog fa-spin'></i>");

[vitor.eduardods]

Hey, Thank you, but I solved this using StaticTextItem as follows:

/**
 * 
 * A "UI component" that participate in a form, allowing to display the status of services execution result.
 * The inner CurrentStatus enumerator aims to enable to set up a status for the service execution result.
 * <p>Those are the possible status:<br />
 * <b>SUCCESS</b> - Render a green circle check;<br />
 * <b>FAIL</b> - Render a yellow circle;<br />
 * <b>ERROR</b> - Render a red circle "x";<br />
 * <b>UNDEFINED</b> - Render a transparent circle with gray border.</p>
 */
public class TrafficLightStatus extends StaticTextItem {
    
    public enum CurrentStatus {
        
        SUCCESS, FAIL, ERROR, UNDEFINED
        
    }
    
    private CurrentStatus status;
    
    public TrafficLightStatus() {
        // Setting as UNDEFINED status by default.
        this.setStatus(CurrentStatus.UNDEFINED);
        // Cleaning the title property.
        this.setTitle("");
        
    }
    
    /**
     * This method sets the suitable CSS class for each status option.
     */
    private void setIconByStatus() {
        // Setting the suitable CSS class for each status option.
        switch (this.status) {
        case UNDEFINED:
            this.setTitleStyle("icon-undefined"); // fa-circle-thin
            break;
        case SUCCESS:
            this.setTitleStyle("icon-success"); // fa-check-circle
            break;
        case FAIL:
            this.setTitleStyle("icon-fail"); // fa-circle
            break;
        case ERROR:
            this.setTitleStyle("icon-error"); // fa-times-circle
            break;

        }
        
    }

    /**
     * Retrieve the current status shown by the component.
     * @return CurrentStatus enumerator option.
     */
    public CurrentStatus getStatus() {
        return status;
    }

    /**
     * Enable to set the current status to be displayed by the component. 
     * [USER="45788"]param[/USER] status CurrentStatus enumerator option.
     */
    public void setStatus(CurrentStatus status) {
        this.status = status;
        setIconByStatus();
    }

}

Thanks guy.