Printing 打印中缺少twitter引导图标

当我点击“打印”时，图标丢失，但在浏览器窗口中显示正确。 我说的是一个包含静态内容的简单页面，除了最新的twitter引导

是否可以在打印中显示引导图标？

来自引导的mdo：“这是一个背景图像，打印时可能会被浏览器删除。”

---

我在这个问题上也被难住了一段时间。我最终制作了一个专门的图像，而不是使用glyphicon系统。然后，我使用

@print

和

:content

将图像插入图标所在的位置

@media print {
    i.glyphicon-arrow-right{ content: url(../img/arrow.png) !important;}
}

完整CSS解决方案 我已经编写了一个CSS打印样式表解决方案，该解决方案应该可以解决80-90%的这个问题，这些问题发生在那些需要引导中的图标（glyphicons）在打印时显示，而不需要用户在浏览器中打开“打印背景图像”的站点上，并且该解决方案可以在所有主要浏览器中使用（Chrome、Safari、Firefox、IE）

此解决方案详细介绍了引导问题，但在需要时可以利用它处理其他类似的背景图像不打印问题。它还假设您使用的是单独的

@media print{}

样式表。我将在最后解释10-20%的情况无法解决，以及原因（以及这些事件的修复）

专门用于定位和调整精灵图像大小的

背景图像

、

背景位置

和

宽度高度

属性问题通过替换为属性

内容：url（）

，

剪辑：rect（）解决

，

页边距顶部

和

页边距左侧

以及一些覆盖

在我的例子中，我们使用

显示国际课程的链接，因此用户经常打印此列表，但浏览器删除了重要的指示信息。我找到了将所有CSS复制到打印样式表中并添加属性值的解决方案

-webkit打印颜色调整：精确；

至

[class^="icon-"], [class*=" icon-"] { background-image: url("../img/glyphicons-halflings.png"); background-position: 14px 14px; background-repeat: no-repeat... } 在打印样式表中输入此项

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; } …然后我可以使用excel电子表格一次性完成所有计算， 我设置了一个excel表格来进行任何sprite修改，只要使用上面的格式，我们只需要3个变量来复制这个过程-img路径、宽度和高度，如果人们要求这些详细信息，我会在这些单元格中使用精确的公式进行更新，但现在这里是结果（稍微聪明一点后，替换notepad++中的所有命令，以删除整数和px之间的空格，并添加一些回车符）

还有1%的用户仍然无法正确打印，我从一个可以正常工作的浏览器打印到一个PDF文件，我可以下载并打印

---

Thx用于读取较旧版本的引导（例如2.3.2）的（@@）

，在

\u reset.scss

的底部有一个

@media print

块，无法改进浏览器打印css的决定。所有最近的浏览器都允许您配置打印时是否需要背景图像。这被

*{background:transparent！important；}覆盖

line在此块中，断开使用背景图像的图标库，即使您在“打印”对话框中选择“打印背景图像”选项

---

如果您使用的是最新的引导版本，而这仍然是一个问题，那么打印媒体css被分离到它自己的文件中，您可以使用排除。

好吧，看看这个…不要显示到我的Chrome打印屏幕上，也不要从IE打印到XPS文件。有什么解决方法吗？我们能够回答您的问题吗？没有提及但是glyphicons.com上的问题。 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; } .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 ; } 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; } i.icon-globe::after{ content: url('../img/globe-glyphicon.png')!important; }