当我点击“打印”时，字符号丢失，但在浏览器窗口中显示正确。 我说的是一个带有静态内容的简单页面，除了最新的twitter bootstrap。
是否可以在打印中显示Bootstrap图标？
答案 0 :(得分：6)
我已经编写了一个CSS打印样式表解决方案，该解决方案可以解决80-90％的问题，这些问题发生在需要来自bootstrap的图标（glyphicons）以便在打印时显示而不需要用户打开的＃34;打印背景图片＆＃34;在他们的浏览器中，此解决方案可在 所有主要浏览器（Chrome，Safari，Firefox，IE） 中使用。
此解决方案详细引用了引导程序问题，但应该可以将其用于其他类似的背景图像问题，而不是在需要时打印。它还假设您使用单独的@media print {}样式表。我将解释其中没有解决的10-20％的情况以及最后的原因（以及对这些事件的修复）。
通过替换属性background-image，{{1}来解决专门用于定位和调整精灵图像的background-position，width height和content: url()属性的问题。 }，clip: rect()和margin-top以及一些覆盖。
在我的情况下，我们使用margin-left显示国际上可用课程的链接，因此用户经常打印此列表，但浏览器删除了重要的指示信息。我找到了复制所有CSS的解决方案，将图标显示在我们的打印样式表中，同时添加属性值
<{1}}到
[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>的呈现方式。
执行精灵的标准方法是声明一个可见的开放空间（在这种情况下为14px乘以14px）然后重新定位该空间后面的-webkit-print-color-adjust:exact;，以便显示相应的图标。
要在前台有效地复制此内容，我们将使用<i class="icon-globe"></i>来调用图片，然后使用background-image将此图片剪切为相应的图标，然后在content: url()中使用负值和clip: rect()将新前景图像放回原始背景图像图标所在的位置。
难度是使用剪辑需要4个坐标（顶部，右侧，底部，左侧）向下剪切图像，而margin-top仅需要2个坐标（xpos，ypos - 距离左上角的像素距离）。使用margin-left属性的另一个困难是，与background-position或clip不同，这些坐标不是从它们各自的外边界计算出来的，而是从顶部和左边计算的，这实际上只是我们的数学从padding转换更容易，但可能需要一些时间才能习惯。
有关剪辑属性的更多信息
（由于我声誉不佳而耗尽了链接，所以你需要弄清楚我做过什么偷偷摸摸的事情）
www.ibloomstudios [点] com /用品/ misunderstood_css_clip /
CSS-花样[点] com / CSS-精灵与 - 直列图像/
tympanus [点]净/ codrops / 2013/01/16 /理解最CSS-剪辑属性/
回到margin示例，我们要转换
[class^="icon-"], [class*=" icon-"] {
display: inline-block;
width: 14px;
height: 14px;
*margin-right: .3em;
line-height: 14px;
vertical-align: text-top;
background-image: url("../img/glyphicons-halflings.png");
background-position: 14px 14px;
background-repeat: no-repeat;
}
//skipping other icons...
.icon-globe {
background-position: -336px -144px;
}
打印样式表
i[class^="icon-"], i[class*=" icon-"] {
display: inline-block;
vertical-align: text-top;
width: 14px;
background-image:none!important;
background-repeat:no-repeat;
background-position: 0 0!important;
}
//skipping other icons...
i.icon-globe::after {
clip: rect(144px 350px 158px 336px)!important;
margin-left: -336px!important;
margin-top: -144px!important;
content: url('../img/glyphicons-halflings.png')!important;
position:absolute!important;
width:auto!important;
height:auto!important;
}
我们可以看到，背景位置（xpos＆amp; ypos或左和上）坐标并更改为正数与 clip：rect（top，left +）相同14px，顶部+ 14px，左）。
然后我们将原始否定background-position用作<i class="icon-globe"></i>和background-position: left top;。
此CSS还包括一些margin-left覆盖，以防原始引导图标显示在我们的新剪裁图像的顶部，该图像在打印时被剥离。
这适用于globe-icon并解决了我的具体问题，但后来我想知道还有多少其他指示图标没有被打印，所以我使用了一些聪明的替换记事本中的所有命令来创建单行版本的bootstrap图标CSS和制表符分隔每个元素（加上一些px到零，所以列将对齐）...
.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;
}
Arg我用尽了角色空间和超链接，因为我的名声太低，你可以帮助我 我将整个CSS结果发布在早期答案中引用的Bootstrap问题报告中 https://github.com/twitter/bootstrap/issues/4412
现在任何通过使用 print 样式表而不是 screen 在浏览器窗口中查看测试过的人都会看到它完美无缺，正如我之前所说的那样，这个解决方案是据我所知，除了10％-20％的病例外，我的工作情况除外。此解决方案的例外情况仅在实际打印页面时显示（或打印到文件以进行无纸调试）。
由于使用margin-top属性所需的!important属性，新的前景图像精灵会溢出可打印区域之外会发生什么。当涉及到W3C标准时，这些图像的渲染是未定义的，如4.2节中的CSS Paged Media Module Level 3中所述 - 页面框外的内容;
此规范未定义如何处理位于页面框外部的框。
（另请查看旧版但更好的解释HTML print with absolute postitions）
那么当没有达成一致的标准时，浏览器巨头们会做些什么，他们都做了不同的事情。发生的事情是整个精灵图像（不可见部分）沿着可打印页面区域的顶部，底部和侧面溢出，迫使浏览器决定如何处理和协调CSS和可打印页面区域。在浏览器中查看时，此浏览器更正不可见，因为它是一个页面，图像可以溢出边界限制而不会出现问题。我将解释每个人在2014年5月28日所做的事情，并且很可能是为什么会这样。
首先让我们使用最好处理它的浏览器，
Internet Explorer！
（我打赌你，虽然我会说别的） 图像被正确剪裁但被推离限制可打印区域边缘，因此在打印输出时将显示在错误的位置。
Safari和Chrome的行为相似，通过限制可打印区域边缘来移动图像，但是指定的剪辑位置错误或者没有显示图标。
Firefox似乎只通过在第一页上打印图标来处理这种情况，如果发生溢出，则强制所有剩余的图标在div或其所在的部分内的顶部页面之上。 （有人可能会认为这会阻止Firefox从整体解决方案中解脱出来，但是第一页的工作原理让我有希望Mozilla将来如果我们提出要求就会解决这个问题）
为什么我说这适用于80-90％？因为精灵的大小和可打印区域的距离是2个决定因素，因页面之间的差异很大，应该只有在大多数情况下，效果可达到可打印区域的20％。
在我的情况下，图标被用在许多页面的大型列表中，因此几乎每个页面顶部的position: absolute;都是错位的，或者错误的图标取决于哪个浏览器。
因为我知道这个页面会经常打印并且需要准确，所以我需要确保它至少99％的时间都能正常工作。我将通过从精灵中删除globe-icon并插入它而不需要额外的定位和裁剪CSS（这是此问题的原始最佳答案）。
i.icon-globe::after{
content: url('../img/globe-glyphicon.png')!important;
}
那1％仍然无法正常打印的用户怎么样呢？我从可以正常工作的浏览器打印到PDF文件，然后我可以下载和打印。
阅读（@ _ @）
答案 1 :(得分：2)
来自Bootstrap的mdo：＆＃34;它是一张背景图片，打印时可能会被浏览器删除。＆＃34;
答案 2 :(得分：1)
我也很难过这一点。我最终制作了我正在使用的字形的专用图像，而不是使用glyphicon系统。然后我使用@print和:content将图像注入图标的任何位置。
@media print {
i.glyphicon-arrow-right{ content: url(../img/arrow.png) !important;}
}
答案 3 :(得分：0)
对于旧版本的Bootstrap（例如2.3.2），@media print底部有一个_reset.scss块，无法改进浏览器打印css决策。所有最近的浏览器都允许您配置打印时是否需要背景图像。这会被此块中的* { background: transparent !important; }行覆盖，即使您选择了“打印背景图片”，也会破坏使用背景图片的图标库。打印对话框中的选项。
如果您使用的是最新的Bootstrap版本，这仍然是一个问题，则将打印媒体css分成了自己的文件，您可以使用Bootstrap customizer排除该文件。