打印中缺少twitter bootstrap图标 [英] twitter bootstrap icons are missing in print
问题描述
当我点击打印时，字符号丢失，但在浏览器窗口中显示正确。
我说的是一个带有静态内容的简单页面，除了最新的twitter bootstrap。
Glyphicons are missing when I hit 'Print', but are shown correctly in browser window. I'm talking about a simple page with static content, except for latest twitter bootstrap.
是否可以在打印中显示Bootstrap图标？
Is it possible to get Bootstrap icons shown in print?
推荐答案
完整的CSS解决方案
我已经编写了一个CSS打印样式表解决方案，该解决方案可解决80-90％的问题，这些问题发生在需要从bootstrap到icon（glyphicons）的网站上打印时显示，无需用户在其浏览器中打开打印背景图像，此解决方案可在 所有主要浏览器（Chrome，Safari，Firefox，IE）中使用 。
FULL CSS SOLUTION
I have written a CSS print stylesheet solution that should solve 80-90% of this problem occurring for sites that require the icons(glyphicons) from bootstrap to show up when printing without requiring the user to turn on "print background images" in their browser and this solution will work in ALL major browsers(Chrome, Safari, Firefox, IE).
此解决方案详细引用了引导程序问题，但应该可以将其用于其他类似的背景图像问题，而不是在需要时打印。它还假设您使用单独的 @media print {} 样式表。我将解释10-20％的情况，它没有解决，为什么在最后（以及对这些事件的修复）。
This solution is detailed referencing the bootstrap issue specifically but it should be possible leverage it for other similar issues of background images not printing when needed. It also assumes you are using a separate @media print {} stylesheet. I'll explain 10-20% of situations it doesn't solve and why at the end(as well as a fix for these occurrences).
问题 background-image ， background-position 和 width height 属性正在通过替换属性 content：url（）， clip：rect（）， margin-top 和 margin-left 以及一些覆盖。
The issue of background-image, background-position and width height properties being used exclusively to position and size sprite images is solved by replacing with the properties content: url(), clip: rect(), margin-top and margin-left along with some overrides.
在我的情况下，我们使用< i class =icon-globe>< / i> 来显示国际课程的链接因此用户经常打印此列表，但浏览器删除了重要的指示信息。我找到了复制所有CSS的解决方案，将图标显示到我们的打印样式表中，同时添加属性值
-webkit-print-color-adjust：exact; 到
In my case we were using the <i class="icon-globe"></i> to show links for courses available internationally and so users frequently printed this list but the important indicating information was removed by the browser. I had found the solution of copying all the CSS to display the icons into our print stylesheet along with adding the property value
-webkit-print-color-adjust:exact; to the
[class^="icon-"], [class*=" icon-"] {
background-image: url("../img/glyphicons-halflings.png");
background-position: 14px 14px;
background-repeat: no-repeat...
}
但这只解决了Chrome和Safari中存在问题，社区没有任何迹象表明Firefox或IE很快就会支持这个webkit属性。
but this only solved the problem in Chrome and Safari with no indication from the community that Firefox or IE would be supporting this webkit property any time soon.
所以我们需要彻底改变<$ c的方式当浏览器将页面发送到打印机驱动程序时，将呈现$ c>< i class =icon-globe>< / i> 。
So we need to completely change how <i class="icon-globe"></i> is rendered when the page is sent to the printer driver by the browser.
执行sprite的标准方法是声明一个可见的开放空间（在这种情况下为14px×14px），然后重新定位 background-image 在该空间后面，以便显示相应的图标。
The standard method with executing sprites is to declare a visible opening space(14px by 14px in this case) and then reposition the background-image behind that space so the appropriate icon can show through.
为了在前台有效地复制它，我们将使用内容：url（）来调用图像，然后 clip：rect（）将此图像缩小到适当的图标，然后在 margin-top 中使用负值 margin-left 将新前景图像放回原始背景图像图标所在的位置。
To effectively replicate this in the foreground we will use the content: url() to call the image and then clip: rect() to cut this image down to the appropriate icon and then use negative values in margin-top and margin-left to position the new foreground image back where the background image icon had originally been positioned.
难度是使用剪辑需要4个坐标（顶部，右侧，底部，左侧）缩小图像，而背景位置只需要2个坐标（xpos，ypos - 距离左上角的像素距离）。使用剪辑属性的另一个困难是，与 padding 或 margin 这些坐标不是从它们各自的外边界计算出来的，而是从顶部和左边计算的，这实际上使我们的数学转换从 background-position 稍微容易一点但是可能花些时间习惯。
A difficulty is cutting the image down using clip requires 4 coordinates(top, right, bottom, left) while background-position only requires 2 coordinates(xpos, ypos - the pixel distances from the top left corner). The other difficulty in using the clip property is that unlike padding or margin these coordinates are not calculated from their respective outside border in but from the top and left sides only which actually makes our math conversion from background-position a little easier but may take some time to get used to.
有关剪辑属性的更多信息
（由于我声誉不佳而耗尽了链接所以你'我需要弄清楚我做过什么偷偷摸摸的事情。
www.ibloomstudios [dot] com / articles / misunderstood_css_clip /
css-tricks [dot] com / css- sprites-with-inline-images /
tympanus [dot] net / codrops / 2013/01/16 / understanding-the-css-clip-property /
More info on clip property
(ran out of links due to my low reputation so you'll need to figure out what sneaky thing I've done)
www.ibloomstudios[dot]com/articles/misunderstood_css_clip/
css-tricks[dot]com/css-sprites-with-inline-images/
tympanus[dot]net/codrops/2013/01/16/understanding-the-css-clip-property/
返回< i class =icon-globe>< / i> 例如，我们要转换
[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;
}
打印样式表中的
into this in the print stylesheet
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& ypos或左） & top）坐标和更改为正数与 clip：rect（top，left + 14px，top + 14px，left）相同。
We can see that taking the background-position(xpos & ypos OR left & top) coordinates and changing to positives are the same as clip: rect(top, left+14px, top+14px, left).
然后我们使用原来的负面背景位置：左上角; 作为边距 - 左和 margin-top 。
Then we use the original negative background-position: left top; as margin-left and margin-top.
这个CSS还包括一些！important 覆盖，以防原始bootstrap图标显示在我们新剪辑的顶部打印时剥离的图像。
This CSS also includes some !important overrides in case the original bootstrap icon is displayed over top of our new clipped image which is stripped out upon printing.
这适用于globe-icon并解决了我的具体问题，但后来我想知道还有多少其他指示图标没有打印出来，所以我用了一些聪明的替换所有命令记事本创建一个单行版本的bootstrap图标CSS和制表符分隔每个元素（加上一些px到零，所以列将排列）...
That worked for the globe-icon and solved my specific problem but then I wondered how many other indicating icons were not being printed and so I used some clever replace all commands in notepad to create a single line version of the bootstrap icon CSS and tab delimited each element (plus added some px to the zeros so columns would line up)...
.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路径，宽度和高度，如果有人要求那些我将在这些单元格中更新精确的公式细节，但现在这里是结果（更聪明地替换记事本++中的所有命令以删除整数和px之间的空格并添加一些回车）......
...and then I could use an excel spreadsheet to do all the calculations in one go, I setup an excel sheet to do any sprite modifications as long as the formatting above is used and we only need 3 variables to replicate this process -img path, width and height, I will update with exact formula in those cells if people request those details but for now here is the result(after a bit more clever replace all commands in notepad++ to remove spaces between integers and px and adding some carriage returns)...
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
Arg I ran out of character space and hyperlinks since my reputation is too low which you can help me with) I posted the entire CSS result in the Bootstrap Issue Report referenced in an earlier answer https://github.com/twitter/bootstrap/issues/4412
现在任何通过浏览器窗口使用 print 样式表而不是 screen 进行测试的人都会看到它完美无缺之前说过这个解决方案，据我所知，除了10％-20％的情况外，它将起作用。此解决方案的例外情况仅在实际打印页面时显示（或打印到文件以进行无纸调试）。
Now anyone that has tested this by viewing in their browser window using their print stylesheet instead of screen will see that it works perfectly and as I said earlier this solution as far as I can tell will work except in 10%-20% percent of cases. The exceptions to this solution will only show up when actually printing the pages(or printing to a file for paperless debugging).
由于的位置：绝对值; 属性，新的前景图像精灵会溢出可打印区域以外会发生什么需要使用 clip 属性。对于W3C标准，这些图像的渲染未定义，如 CSS Paged Media中所述第4.2节中的模块级别 - 页面框外的内容;
What happens is the new foreground images sprites can overflow outside printable areas because of the position: absolute; property which is required to use clip property. When it comes to the W3C standard the rendering of these images is undefined as stated in the CSS Paged Media Module Level 3 in section 4.2-Content outside the page box;
此规范未定义如何处理位于页面框外部的框。
This specification does not define how boxes positioned outside the page box are handled.
（另请查看更旧但更好的解释 HTML print绝对的帖子）
(Also check this for an older but better explanation HTML print with absolute postitions )
那么当没有达成一致的标准时，浏览器巨头会做些什么，他们都做了不同的事情。发生的事情是整个精灵图像（不可见部分）沿着可打印页面区域的顶部，底部和侧面溢出，迫使浏览器决定如何处理和协调CSS和可打印页面区域。在浏览器中查看时，此浏览器更正不可见，因为它是一个页面，图像可以溢出边界限制而不会出现问题。我会解释每个人在2014年5月28日所做的事情，并且很可能是为什么会这样。
So what do the browser giants do when no standard has been agreed upon, they all do something different. What happens is the entire sprite image(non-visible portion) that overflows along the top, bottom and sides of the printable page area forces the browsers to decide how to handle and reconcile the CSS and printable page areas. This browser correction is not visible when viewing the in the browser because it is all one page and images can overflow side limits without issue. I'll explain what each one does as of May 28 2014 and most likely why it is happening this way.
首先让我们使用最好处理它的浏览器，
First lets go with the browser that handles it the best,
Internet Explorer！
Internet Explorer!
（我打赌你虽然我会说别的）
图片是正确剪裁，但被推离限制可打印区域边缘，因此在打印输出时将显示在错误的位置。
(I bet you though I was going to say anything else) The image is clipped properly but is pushed away from limiting printable area edges and so will appear in the wrong place on print out.
Safari和Chrome的行为相似，图像通过限制移动可打印区域边缘，但剪辑保留在现场被指定为错误或没有显示图标。
Safari and Chrome behave similarly, the image is moved by limiting printable area edges but the clip remains in the spot is was designated so wrong or no icon is shown.
Firefox似乎只通过在第一个上打印图标来处理这个问题页面，如果发生溢出，则强制所有剩余的图标在div存在的div或部分中的顶部页面之上。 （有人可能会认为这会阻止Firefox从整体解决方案中解脱出来，但是第一页的工作原理让我对未来如果我们提出要求很快就会解决的问题）
Firefox appears to handle this the worst by only printing icons on the first page and if overflow occurs then forces all remaining icons into the top page on top of one another within the div or section it exists. (one might argue that this precludes Firefox from the overall solution but the fact that the first page works makes me hopeful that Mozilla will resolve in the future if we ask nicely)
为什么我说这将适用于80-90％？因为精灵的大小和可打印区域的距离是2个决定因素，这些因素在不同页面之间会有很大差异，并且只会影响大多数案件高达可打印面积的20％。
Why do I say this will work for 80-90%? because the size of the sprite and the distance from printable area are 2 determining factors that will vary widely from page to page and should only effect in most cases up to 20% of the printable area.
In在我的情况下，图标被用在许多页面的大型列表中，因此几乎每个页面顶部的 globe-icon 都未对齐或者图标错误，具体取决于哪个浏览器。
因为我知道这个页面会经常打印并且需要准确，所以我需要确保这个页面至少有99％的时间可以正常工作。我将通过从精灵中删除globe-icon并插入它而没有所有额外的定位和裁剪CSS（这是此问题的原始最佳答案）来做到这一点。
In my case the icon is being used in a large list across many pages and so the globe-icon at the top of almost every page is misaligned or the wrong icon depending on which browser.
Since I know this page will be printed often and needs to be accurate then I need to make sure this works at least 99% of the time. I'll do this by cutting out the globe-icon from the sprite and and insert it without all the extra positioning and clipping CSS (which is the original best answer for this issue).
i.icon-globe::after{
content: url('../img/globe-glyphicon.png')!important;
}
那1％的用户仍然无法正确打印此内容，我打印到来自浏览器的PDF文件可以正常工作，我可以下载和打印。
and what about that 1% of users that still cant print this off properly, I print to a PDF file from a browser that does work and I make that available to download and print.
阅读（@ _ @）
这篇关于打印中缺少twitter bootstrap图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
