I'm trying to make a game prototype to print with CSS and Javascript, but the icons are losing color when the print tab is open

Question

i'm using icons like , and but they always lose the color when i try to print, i used:

 @media print  {
    .game-card-reactions {
      -webkit-break-inside: avoid;
      break-inside: avoid;
      -webkit-print-color-adjust: exact!important; 
    }
}

worked for the colors on the cards, but didn't work on the icons... Actual Desired

The colors are important because of the color code on the side of the cards

score 1 · Answer 1 · answered Jan 16 '21 at 14:25

1

This code works for me in most situations regarding print color

@media print {
  *{
    color-adjust: exact;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

answered Jan 16 '21 at 14:25

Ozgur Sar

2,067
2
11
23

Tryed that, the icons are utf-8 and skill without their original color – Davi Araki Jan 16 '21 at 14:47
Can you try the `text-shadow` solution here? https://stackoverflow.com/questions/32413731/color-for-unicode-emoji/39776303#39776303 – Ozgur Sar Jan 16 '21 at 14:51
The icons must have diferent colors – Davi Araki Jan 16 '21 at 15:32

I'm trying to make a game prototype to print with CSS and Javascript, but the icons are losing color when the print tab is open

1 Answers1