CSS overrides font of parent

[1ydia]

I was playing around with remixicon, and I noticed something odd, that makes the use unintuitive:

[class^="ri-"], [class*=" ri-"] {
  font-family: 'remixicon' !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

This overrides the font of a parent object, while the icons are still placed before the parent element. In my project, I rewrote this as such:

[class^="ri-"]::before, [class*=" ri-"]::before {
  font-family: 'remixicon' !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

While there could be some use that I'm missing, perhaps there should be an option to default to ::before? Or maybe there's some feature I'm missing (most likely)? Wanted some thoughts on this, if there isn't already a way to do this. Sure, I could use scss and @extend the class before the parent, but that's no good for inline use.