Question

I have an icon that is inserted into a page using the background-image property. Works great. However the icon is white and when printed it doesn’t show up. I have a print stylesheet I have setup but the icon doesn’t show when printed. I assume this is because I am using the background-image property and it doesn’t print background-images. What is the best way to work around this problem to get the icon to show and print?

CSS:

 /* PAGE CSS */ 

.info-icon{
   width: 16px;
   height: 16px;
   padding: 0 10px;
   background-repeat: no-repeat;
   background-image: url(data:image/png;base64,-data-URI-code-) /* White Icon */;
}

 /* PRINT CSS */ 

.info-icon{
   width: 16px;
   height: 16px;
   padding: 0 10px;
   background-repeat: no-repeat;
   background-image: url(data:image/png;base64,-data-URI-code-) /* Black Icon */;
}

HTML

<p class="textcenter"><span class="info-icon"></span>Photo Info:</p>

Answer 1

Unless someone comes up with a better solution here is what I ended up doing. Similar to what Sheikh Heera’s Link recommended.

HTML:

<p class="textcenter">
  <img class="info-icon-black" src="data:image/png;base64, -DATA-URI-CODE-" />
  <span class="info-icon"></span>Photo Info:</p>

CSS:

/* PRINT STYLESHEET
-------------------------
SHOW BLACK INFO ICON  */

.info-icon-black{
    display:inline;
}

/* HIDE WHITE INFO ICON  */

.info-icon { 
    display:none; 
    /* I still hide in the event someone has print background
    images ticked on in print options. */
}


/* SCREEN STYLESHEET
-------------------------
HIDE BLACK INFO ICON  */

.info-icon-black{ 
    display:none;
}

/* SHOW WHITE INFO ICON  */

.info-icon{
  width: 16px;
  height: 16px;
  padding: 0 10px;
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64, -DATA-URI-CODE-;
}