Rendering fontcustom icons in print view in Chrome and Safari

So, I’ve got a bunch of fontcustom icons I’m using on a website. Great project, makes it really easy to generate icons into a font that renders well on pretty much every device. Except when printing in Chrome and Safari. I had several icons sitting in table cells, and their height expanded to the height of the full printable page. Meaning, there was a single row per page, and a giant chunk of white space under the row. The icon was doing something to tell the print view to start a new page. Super strange.

Unfortunately, I didn’t figure out why the heck this was happening. However, I did figure out a workaround. This guy in your css stylesheet will apply changes only to the print view for Chrome and Safari:


@media print and (-webkit-min-device-pixel-ratio:0)

I created .gif versions of the icons I needed. Then, for these icons, I overwrite the :before pseudo-element to render the .gif I created instead of the font. I also needed to set the font-family to none. So, basically this (included within that @media element) (Also, this is SASS, but if you know CSS you can figure out what’s up):


.icon-skip{
  &:before{
    font-family: none;
    content: url('../images/icon-skip-print.gif');
  }
}

Leave a Reply