Wordpress：打印页面上不显示图标

Question

我创建了一个wordpress网站。我的问题：打印版本中没有显示两个图标。

我的HTML代码来了：

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

我的CSS指定图标：

.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;
}

在常规屏幕版本中，两个图标icon_1和icon_2都可以正常显示。在印刷版中，只显示句子，没有图标 - 独立于我使用的浏览器。

任何人都可以猜出问题是什么？

Answer 1

添加以下内容，它将打印..重复所有实例

@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;
     }
}

这是pdf测试结果的打印。一个是@media而另一个没有