How to overrule Bootstraps Css text-shadow / box-shadow for @media print

Question

With Bootstrap4 I'm facing the problem that font-icons get shown as if there is an encodling problem (rectangle instead of icon) when printing. The problem can be solved quick&dirty by commenting the following line in the bootstrap.css:

@media print {
  ...
//  *::first-letter,
  ... {
    text-shadow: none !important;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
  }

Every time a newer Version of Bootstrap will be used we would have to comment this line again and again. Which might cause problem as I'm not the only web-dev working on this particular project.

Usually I would write the default-value for text-shadow and box-shadow in the project-specific css-file but actually "none" IS the default value. No idea why the setting the default-value messes up the font-icons.

Anyone had a similar problem with text- and box-shadow and found a solution?

thanx, kr, MH

---

Update (Problem solved):

i finally managed to fix the problem and it's as simple as can be. When you use FontAwesome there is no problem. We use Fontello and if somebody here got the same problem here's the trick:

FontAwesome sets

.fa {display: inline-block;}

Fontello doesn't - just add this this for the class you use for the fonticons in your CSS and you should be happy ever after.