Rotate FontAwesome icons using SCSS or inline

I've got a grid in which two boolean colums appear. What I want is the following:

• Column1:
• When true: firebrick color and rotate -45 degrees.
• When false: firebrick color, rotate -45 degrees and apply 20% opacity.
• Column2:
• When true: yellowstone color and rotate -225 degrees.
• When false: yellowstone color, rotate -225 degrees and apply 20% opacity.

As far as I know, I must add some rules to my custom SCSS file:

.servicio-on .v-icon {

    color: firebrick;
    -ms-transform: rotate(-45deg); /* IE 9 */
    -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
    transform: rotate(-45deg);
    font-family: FontAwesome;
    
}

.servicio-off .v-icon {

    color: firebrick;
    -ms-transform: rotate(-45deg); /* IE 9 */
    -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
    transform: rotate(-45deg);
    opacity: 0.2;
    filter: alpha(opacity=20); /* For IE8 and earlier */
    font-family: FontAwesome;
    
}

.traslado-on .v-icon {

    color: yellowgreen;
    -ms-transform: rotate(-225deg); /* IE 9 */
    -webkit-transform: rotate(-225deg); /* Chrome, Safari, Opera */
    transform: rotate(-225deg);
    font-family: FontAwesome;
    
}

.traslado-off .v-icon {

    color: yellowgreen;
    -ms-transform: rotate(-225deg); /* IE 9 */
    -webkit-transform: rotate(-225deg); /* Chrome, Safari, Opera */
    transform: rotate(-225deg);
    opacity: 0.2;
    filter: alpha(opacity=20); /* For IE8 and earlier */
    font-family: FontAwesome;
    
}

Then, I apply my style to the column that way:

Grid.Column colTraslado = gridNombramientos.getColumn("tieneTraslado");
        colTraslado.setHeaderCaption("Traslado");
        colTraslado.setRenderer(new HtmlRenderer(), new Converter<String, Boolean>(){

            private static final long serialVersionUID = 2939231877605506440L;

            @Override
            public Boolean convertToModel(String value,
                    Class<? extends Boolean> targetType, Locale locale)
                    throws com.vaadin.data.util.converter.Converter.ConversionException {
                return false;
            }

            @Override
            public String convertToPresentation(Boolean value,
                    Class<? extends String> targetType, Locale locale)
                    throws com.vaadin.data.util.converter.Converter.ConversionException {

                String ret;
                
                if(value){
                    // traslado-on
                    ret = "<span class=\"v-icon traslado-on" >&#x" + Integer.toHexString(0XF064) + ";</span>";
                }else{
                    // traslado-off
                    ret = "<span style=\"v-icon traslado-off" >&#x" + Integer.toHexString(0XF064) + ";</span>";
                }
                
                return ret;
                
            }

            @Override
            public Class<Boolean> getModelType() {
                return Boolean.class;
            }

            @Override
            public Class<String> getPresentationType() {
                return String.class;
            }
            
        });

When applying that, the icons are shown black with no rotation (default).

What am I doing wrong?

PS: I've tried to apply inline style that way, e.g.:

if(value){
                    // traslado-on
                    ret = "<span style=\"color: yellowgreen; -ms-transform: rotate(-225deg); -webkit-transform: rotate(-225deg); transform: rotate(-225deg); font-family: FontAwesome;\" >&#x" + Integer.toHexString(0XF064) + ";</span>";
                }else{
                    // traslado-off
                    ret = "<span style=\"color: yellowgreen; -ms-transform: rotate(-225deg); -webkit-transform: rotate(-225deg); transform: rotate(-225deg); opacity: 0.2; filter: alpha(opacity=20); font-family: FontAwesome;\" >&#x" + Integer.toHexString(0XF064) + ";</span>";
                }

That way, icons' colors and opacities are shown correctly, but rotation is not shown...

Need help :(

Thank you in advance!

Solved!!!

My original answer, the one before PS, was the right one.

I've realised that sometimes it takes compiling theme/widgetset several times to show changes.