当我点击“打印”时，Glyphicons 图标消失了，但在浏览器窗口中显示正常。我的意思是一个简单的页面，除了最新的 Twitter Bootstrap 外，没有动态内容。
是否有可能在打印中显示 Bootstrap 图标？
是否有可能在打印中显示 Bootstrap 图标？
Twitter Bootstrap图标在打印中丢失。
5
- user1889307
3
那看起来……我的Chrome截图也不显示，从IE也无法打印XPS文件。 - Jeromy French
有什么解决方法吗？ - Elias Dorneles
我们能回答您的问题吗？ - Jeromy French
4个回答
7
CSS全面解决方案
我编写了一个CSS打印样式表的解决方案，应该能够解决80-90%需要bootstrap图标(glyphicons)在打印时不需要用户在浏览器中打开"打印背景图像"的问题，并且这个解决方案将适用于所有主要浏览器(Chrome, Safari, Firefox, IE)。
本解决方案具体参考了bootstrap的问题，但也应该可以用于类似的背景图像在打印时未能显示的其他情况。它还假定您正在使用单独的@media print {}样式表。我将在最后解释它不能解决10-20%的情况以及原因（以及这些情况的解决方法）。
通过替换background-image、background-position和width height属性，该解决方案解决了专门用于定位和调整sprite图像大小的问题。这些被替换成了content: url()、clip: rect()、margin-top和margin-left属性，以及一些覆盖。
在我的情况下，我们使用<i class="icon-globe"></i>来显示国际课程的链接，因此用户经常打印此列表，但是浏览器删除了重要的指示信息。我已经找到了解决方案，将所有CSS复制到我们的打印样式表中，并添加属性值
-webkit-print-color-adjust:exact;到
[class^="icon-"], [class*=" icon-"] {
background-image: url("../img/glyphicons-halflings.png");
background-position: 14px 14px;
background-repeat: no-repeat...
}
但这仅在Chrome和Safari中解决了问题，社区也没有表明Firefox或IE会很快支持这个webkit属性。
所以我们需要完全改变当页面被发送到打印机驱动程序时浏览器如何呈现<i class="icon-globe"></i>。执行sprites的标准方法是声明一个可见的开放空间（在本例中为14像素乘以14像素），然后重新定位background-image到该空间的后面，以便适当的图标可以穿过。为了在前景中有效地复制这个操作，我们将使用content: url()调用图像，然后使用clip: rect()将该图像裁剪为适当的图标，并使用负值在margin-top和margin-left中定位新的前景图像回到原来位置上的背景图像图标。
接下来是实际代码。以上述示例为例，我们想把代码转换成打印样式表中的代码。我们可以看到，将background-position(xpos&ypos或left&top)坐标更改为正数与clip:rect(top, left+14px, top+14px, left)相同。然后，我们使用原始的负的background-position：left top;作为margin-left和margin-top。
这个CSS还包括一些!important的覆盖，以防原始的bootstrap图标显示在我们新的剪裁图片之上，而这些图标被打印时会被剥离掉。
这对于地球图标起作用并解决了我的特定问题，但是我想知道有多少其他指示性图标没有被打印出来，所以我使用了一些聪明的替换所有命令，在记事本中创建了一个单行版本的bootstrap图标CSS，每个元素都用制表符分隔（还添加了一些像素到零，以便列对齐）...
.icon-glass { background-position: 0 px 0 px ; }
.icon-music { background-position: -24 px 0 px ; }
.icon-search { background-position: -48 px 0 px ; }
.icon-envelope { background-position: -72 px 0 px ; }
.icon-heart { background-position: -96 px 0 px ; }
.icon-star { background-position: -120 px 0 px ; }
.icon-star-empty { background-position: -144 px 0 px ; }
.icon-user { background-position: -168 px 0 px ; }
.icon-film { background-position: -192 px 0 px ; }
.icon-th-large { background-position: -216 px 0 px ; }
.icon-th { background-position: -240 px 0 px ; }
.icon-th-list { background-position: -264 px 0 px ; }
.icon-ok { background-position: -288 px 0 px ; }
.icon-remove { background-position: -312 px 0 px ; }
.icon-zoom-in { background-position: -336 px 0 px ; }
.icon-zoom-out { background-position: -360 px 0 px ; }
.icon-off { background-position: -384 px 0 px ; }
.icon-signal { background-position: -408 px 0 px ; }
.icon-cog { background-position: -432 px 0 px ; }
.icon-trash { background-position: -456 px 0 px ; }
.icon-home { background-position: 0 px -24 px ; }
.icon-file { background-position: -24 px -24 px ; }
.icon-time { background-position: -48 px -24 px ; }
.icon-road { background-position: -72 px -24 px ; }
.icon-download-alt { background-position: -96 px -24 px ; }
.icon-download { background-position: -120 px -24 px ; }
.icon-upload { background-position: -144 px -24 px ; }
.icon-inbox { background-position: -168 px -24 px ; }
.icon-play-circle { background-position: -192 px -24 px ; }
.icon-repeat { background-position: -216 px -24 px ; }
.icon-refresh { background-position: -240 px -24 px ; }
.icon-list-alt { background-position: -264 px -24 px ; }
.icon-lock { background-position: -287 px -24 px ; }
.icon-flag { background-position: -312 px -24 px ; }
.icon-headphones { background-position: -336 px -24 px ; }
.icon-volume-off { background-position: -360 px -24 px ; }
.icon-volume-down { background-position: -384 px -24 px ; }
.icon-volume-up { background-position: -408 px -24 px ; }
.icon-qrcode { background-position: -432 px -24 px ; }
.icon-barcode { background-position: -456 px -24 px ; }
.icon-tag { background-position: 0 px -48 px ; }
.icon-tags { background-position: -25 px -48 px ; }
.icon-book { background-position: -48 px -48 px ; }
.icon-bookmark { background-position: -72 px -48 px ; }
.icon-print { background-position: -96 px -48 px ; }
.icon-camera { background-position: -120 px -48 px ; }
.icon-font { background-position: -144 px -48 px ; }
.icon-bold { background-position: -167 px -48 px ; }
.icon-italic { background-position: -192 px -48 px ; }
.icon-text-height { background-position: -216 px -48 px ; }
.icon-text-width { background-position: -240 px -48 px ; }
.icon-align-left { background-position: -264 px -48 px ; }
.icon-align-center { background-position: -288 px -48 px ; }
.icon-align-right { background-position: -312 px -48 px ; }
.icon-align-justify { background-position: -336 px -48 px ; }
.icon-list { background-position: -360 px -48 px ; }
.icon-indent-left { background-position: -384 px -48 px ; }
.icon-indent-right { background-position: -408 px -48 px ; }
.icon-facetime-video { background-position: -432 px -48 px ; }
.icon-picture { background-position: -456 px -48 px ; }
.icon-pencil { background-position: 0 px -72 px ; }
.icon-map-marker { background-position: -24 px -72 px ; }
.icon-adjust { background-position: -48 px -72 px ; }
.icon-tint { background-position: -72 px -72 px ; }
.icon-edit { background-position: -96 px -72 px ; }
.icon-share { background-position: -120 px -72 px ; }
.icon-check { background-position: -144 px -72 px ; }
.icon-move { background-position: -168 px -72 px ; }
.icon-step-backward { background-position: -192 px -72 px ; }
.icon-fast-backward { background-position: -216 px -72 px ; }
.icon-backward { background-position: -240 px -72 px ; }
.icon-play { background-position: -264 px -72 px ; }
.icon-pause { background-position: -288 px -72 px ; }
.icon-stop { background-position: -312 px -72 px ; }
.icon-forward { background-position: -336 px -72 px ; }
.icon-fast-forward { background-position: -360 px -72 px ; }
.icon-step-forward { background-position: -384 px -72 px ; }
.icon-eject { background-position: -408 px -72 px ; }
.icon-chevron-left { background-position: -432 px -72 px ; }
.icon-chevron-right { background-position: -456 px -72 px ; }
.icon-plus-sign { background-position: 0 px -96 px ; }
.icon-minus-sign { background-position: -24 px -96 px ; }
.icon-remove-sign { background-position: -48 px -96 px ; }
.icon-ok-sign { background-position: -72 px -96 px ; }
.icon-question-sign { background-position: -96 px -96 px ; }
.icon-info-sign { background-position: -120 px -96 px ; }
.icon-screenshot { background-position: -144 px -96 px ; }
.icon-remove-circle { background-position: -168 px -96 px ; }
.icon-ok-circle { background-position: -192 px -96 px ; }
.icon-ban-circle { background-position: -216 px -96 px ; }
.icon-arrow-left { background-position: -240 px -96 px ; }
.icon-arrow-right { background-position: -264 px -96 px ; }
.icon-arrow-up { background-position: -289 px -96 px ; }
.icon-arrow-down { background-position: -312 px -96 px ; }
.icon-share-alt { background-position: -336 px -96 px ; }
.icon-resize-full { background-position: -360 px -96 px ; }
.icon-resize-small { background-position: -384 px -96 px ; }
.icon-plus { background-position: -408 px -96 px ; }
.icon-minus { background-position: -433 px -96 px ; }
.icon-asterisk { background-position: -456 px -96 px ; }
.icon-exclamation-sign { background-position: 0 px -120 px ; }
.icon-gift { background-position: -24 px -120 px ; }
.icon-leaf { background-position: -48 px -120 px ; }
.icon-fire { background-position: -72 px -120 px ; }
.icon-eye-open { background-position: -96 px -120 px ; }
.icon-eye-close { background-position: -120 px -120 px ; }
.icon-warning-sign { background-position: -144 px -120 px ; }
.icon-plane { background-position: -168 px -120 px ; }
.icon-calendar { background-position: -192 px -120 px ; }
.icon-random { background-position: -216 px -120 px ; }
.icon-comment { background-position: -240 px -120 px ; }
.icon-magnet { background-position: -264 px -120 px ; }
.icon-chevron-up { background-position: -288 px -120 px ; }
.icon-chevron-down { background-position: -313 px -119 px ; }
.icon-retweet { background-position: -336 px -120 px ; }
.icon-shopping-cart { background-position: -360 px -120 px ; }
.icon-folder-close { background-position: -384 px -120 px ; }
.icon-folder-open { background-position: -408 px -120 px ; }
.icon-resize-vertical { background-position: -432 px -119 px ; }
.icon-resize-horizontal { background-position: -456 px -118 px ; }
.icon-hdd { background-position: 0 px -144 px ; }
.icon-bullhorn { background-position: -24 px -144 px ; }
.icon-bell { background-position: -48 px -144 px ; }
.icon-certificate { background-position: -72 px -144 px ; }
.icon-thumbs-up { background-position: -96 px -144 px ; }
.icon-thumbs-down { background-position: -120 px -144 px ; }
.icon-hand-right { background-position: -144 px -144 px ; }
.icon-hand-left { background-position: -168 px -144 px ; }
.icon-hand-up { background-position: -192 px -144 px ; }
.icon-hand-down { background-position: -216 px -144 px ; }
.icon-circle-arrow-right { background-position: -240 px -144 px ; }
.icon-circle-arrow-left { background-position: -264 px -144 px ; }
.icon-circle-arrow-up { background-position: -288 px -144 px ; }
.icon-circle-arrow-down { background-position: -312 px -144 px ; }
.icon-globe { background-position: -336 px -144 px ; }
.icon-wrench { background-position: -360 px -144 px ; }
.icon-tasks { background-position: -384 px -144 px ; }
.icon-filter { background-position: -408 px -144 px ; }
.icon-briefcase { background-position: -432 px -144 px ; }
.icon-fullscreen { background-position: -456 px -144 px ; }
然后我可以使用Excel电子表格一次性进行所有计算，我设置了一个Excel表格来进行任何精灵修改，只要使用上面的格式，并且我们只需要3个变量来复制此过程- img路径，宽度和高度。如果有人需要这些详细信息，我将在这些单元格中更新确切的公式，但现在这是结果（经过一些聪明的notepad++替换所有命令，以删除整数和px之间的空格并添加一些回车符）...
i.icon-glass::after{
clip: rect( 0px 14px 14px 0px)!important;
margin-top: 0px!important;
margin-left: 0px!important;
content: url('../img/glyphicons-halflings.png')!important; position:absolute!important;
width:auto!important;
height:auto!important;
}
i.icon-music::after{
clip: rect( 0px 38px 14px 24px)!important;
margin-top: 0px!important;
margin-left: -24px!important;
content: url('../img/glyphicons-halflings.png')!important;
position:absolute!important;
width:auto!important;
height:auto!important;
}
i.icon-search::after{
clip: rect( 0px 62px 14px 48px)!important;
margin-top: 0px!important;
margin-left: -48px!important;
content: url('../img/glyphicons-halflings.png')!important;
position:absolute!important;
width:auto!important;
height:auto!important;
}
我用完字符空间和超链接了，因为我的声望太低了，你可以帮我)
我在早期的答案中引用的Bootstrap问题报告中发布了整个CSS结果
https://github.com/twitter/bootstrap/issues/4412
当它无法工作时
现在，任何通过使用其打印样式表而不是屏幕在其浏览器窗口中查看此内容的人都会发现它完美地运行，就像我之前说的那样，这个解决方案据我所知将适用，除了10％-20％的情况。这个解决方案的例外情况只会在实际打印页面（或打印到文件以进行无纸化调试）时显示出来。由于需要使用
clip属性，新的前景图像精灵可能会溢出可打印区域之外，因此需要使用position：absolute;属性。当涉及W3C标准时，这些图像的呈现未定义，如在CSS分页媒体模块3级第4.2节“页面框外的内容”中所述。
本规范未定义如何处理位于页面框之外的框。
（同时检查这里提供的旧但更好的解释：HTML打印与绝对位置）
当没有达成标准时，浏览器巨头们会怎么做呢？他们都会采取不同的方法。发生的情况是整个精灵图像（非可见部分）溢出到可打印页面区域的顶部、底部和侧面，迫使浏览器决定如何处理和调节CSS和可打印页面区域。当在浏览器中查看时，此浏览器修正是不可见的，因为它是一个页面，图像可以在没有问题的情况下溢出侧限。 我将解释每个浏览器从2014年5月28日开始执行的操作，以及很可能为什么会以这种方式发生。
首先让我们来看最好处理它的浏览器，
互联网浏览器！
（我敢打赌你认为我会说其他任何事） 图像被正确地裁剪，但被推离限制可打印区域的边缘，因此在打印出来时会显示在错误的位置。
Safari和Chrome的行为类似，通过限制可打印区域的边缘移动图像，但裁剪仍然保持在指定的位置，因此显示错误或不显示图标。
Firefox似乎处理得最差，仅在第一页上打印图标，如果溢出发生，则将所有剩余的图标强制放入div或它存在的部分的顶部重叠在一起。 （有人可能会认为这使Firefox无法获得整体解决方案，但第一页可以正常工作的事实让我希望如果我们友好地提出请求，Mozilla将来会解决这个问题）
我为什么说这可以解决80-90%的问题？ 因为精灵大小和距可打印区域的距离是两个决定因素，这些因素会因页面而异，并且在大多数情况下只应影响到可打印区域的20%。
对于这10-20%的情况解决方案
在我的情况下，该图标被用于跨越许多页面的大型列表中，因此几乎每个页面顶部的globe-icon都错位或显示错误，具体取决于使用的浏览器。由于我知道这个页面经常需要打印并且需要准确无误，因此我需要确保这至少在99%的情况下有效。我将通过从精灵中剪切出globe-icon并插入不带所有额外定位和裁剪CSS的图像来实现这一点（这是该问题的最佳原始答案）。
i.icon-globe::after{
content: url('../img/globe-glyphicon.png')!important;
}
那么对于仍然无法正常打印此内容的1％用户怎么办？ 我会从可以工作的浏览器中打印到PDF文件中，并提供其下载和打印。
感谢阅读 (@_@)
- Supamic
2
来自Bootstrap的mdo：“这是一张背景图片，当打印时，浏览器可能会将其删除。”
- Jeromy French
1
尽管没有来自glyphicons.com的问题提及。 - Jeromy French
1
我在这个问题上也遇到了困难。最终，我制作了一个专用图像来代替使用glyphicon系统。然后，我使用
@print和:content将图像注入到应该放置图标的位置。@media print {
i.glyphicon-arrow-right{ content: url(../img/arrow.png) !important;}
}
- A Guest
0
对于旧版本的Bootstrap（例如2.3.2），在_reset.scss底部有一个@media print块，未能改进浏览器打印CSS决策。所有最新的浏览器都可以配置是否在打印时显示背景图像。这被这个块中的* { background: transparent !important; }行覆盖，破坏了使用背景图像的图标库，即使您选择在打印对话框中选择“打印背景图像”选项。
如果您使用最新的Bootstrap版本仍然存在此问题，则可以将打印媒体CSS分离到其自己的文件中，您可以通过Bootstrap customizer来排除它。
- Jorn van de Beek
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接