WordPress: Icons are not displayed on printed page

0 Views

I created a wordpress website. My problem: Two icons are not displayed in the printed version.

Here comes my HTML code:

Read More
<p class="my_class_1">First sentence</p>
<p class="my_class_2">Second sentence </p>

My CSS which specifies the icons: 

.my_class_1:before {
    content: "";
    display: block;
    background: url("images/icon_1.png") no-repeat;
    width: 20px;
    height: 20px;
    float: left;
    margin: 0 6px 0 0;
}

.my_class_2:before {
    content: "";
    display: block;
    background: url("images/icon_2.png") no-repeat;
    width: 20px;
    height: 20px;
    float: left;
    margin: 0 6px 0 0;
}

In the regular screen version both icons, icon_1 and icon_2, are displayed fine. In the printed version the sentences only are displayed, without icons – independent of the browser I’m using.

Anyone can guess what’s the problem?

Post Views: 0

Related posts

Leave a Reply

1 comment

  1. Add the following and it will print.. Repeat for all instances

    @media print {
    .my_class_1:before {    
         content: url(http://iopscience.iop.org/img/close-icon.png);
         display: block;
         background: url("http://iopscience.iop.org/img/close-icon.png") no-repeat;
         width: 20px;
         height: 20px;
         float: left;
         margin: 0 6px 0 0;
     }
}

    Here is a print to pdf test result. One withe @media and the other without

    enter image description here