Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
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.