Unable to target ".svg-inline--fa" using Css + Sass

[JimmyWoooo]

Describe the problem

I'm trying to apply a round border around the svg but it's not working(sort of??). I'm targeting the .svg-inline--fa class to apply my css. It only works if the file is extension is Css and it's written like Sass nesting with a parent element.

Using Angular 14 and FontAwesome 5

What did you expect?

I expected a round border around the icon but it seems that no stylings were applied. It works only for Chromium-based browsers.

Reproducible test case

CSS file(no container): Doesn't work pic

.svg-inline--fa{
    border: 3px solid red;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    padding: .25rem;
}

CSS file(with container SCSS style): Works for Chrome + Edge pic

.container{
    .svg-inline--fa{
        border: 3px solid red;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        padding: .25rem;
    }
}

CSS file(with container): Doesn't work pic

.container .svg-inline--fa{
      border: 3px solid red;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      padding: .25rem;
}

SCSS file(no container): Doesn't work pic

SCSS file(container): Doesn't work pic

[devoto13]

Please refer to this guide on how to style icon internals.

[JimmyWoooo]

Global styles did the trick. Thanks!