How can I override a font awesome icon's pull right width for Internet Explorer?

user_6471259 0
Viewed 575

In our Angular6 project, I have a ngx-bootstrap4 accordion with a font awesome 5 icon with the pull right property, <fa-icon [icon]="['fas', accordionOpen ? 'chevron-down' : 'chevron-right']" pull="right"></fa-icon>

which looks like this in Chrome. But of course, IE doesn't want to play nice, so it looks like this in IE11.

I identified that removing width: auto does the trick from the CSS class .svg-inline--fa .fa-pull-right while in the dev tools for IE, however, if I try and target that class for IE using the media query 

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
 .svg-inline--fa .fa-pull-right {
  width: 20px!important;
 }
}

in the component's scss file, the class still persists the auto parameter. (I tried this globally and Chrome still hangs on to it as well, tried setting it to 20px, I also know the media query works as I changed the font to purple).

So how would I override the setting?

If you can't override this CSS, then programmatically turning off pull=right for the fa-icon just for IE would be a fine solution as well.

angular6 font-awesome bootstrap-4 sass html
1 Answers

Well, removing the pull property for fa-icon and replacing it with style="float: right" did the trick. For example:

<fa-icon [icon]="['fas', accordionOpen ? 'chevron-down' : 'chevron-right']" style="float: right"></fa-icon>

Appears virtually the same on Chrome as it did before as well.

user_64712590
Related