I think you have your selectors the other way around. If you want to style the glyphicon-triangle-bottom conditionally, wrap it in a container, put a class on the surrounding container and then apply styling accordingly. I expect the scss to look like this:
.form-arrow-icon {
.glyphicon-triangle-bottom {
color: #fff;
text-align: center;
cursor: text;
}
}
Did you compile it using calypso?
https://docs.mendix.com/howto8/front-end/calypso
*********** EDIT ***********
You can just put your custom classes in main.scss or write them in a seperate scss file and link it to main.scss
https://docs.mendix.com/howto/front-end/customize-styling-new#styling-editor