twitter-bootstrap 如何在 Holder.js 图像中使用 Bootstrap Glyphicons
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19250594/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use Bootstrap Glyphicons in Holder.js images
提问by Samuel Hawksby-Robinson
I'm building the front-end of a project with Bootstrap and I'm looking to use the Glyphiconsfound in 3.0.0 instead of usual text. How would I do this?
我正在使用 Bootstrap 构建项目的前端，并且希望使用3.0.0 中的Glyphicons而不是通常的文本。我该怎么做？
Those of you familiar with Holder.jswill know that the JS basically creates place-holder images on the client side. This has useful bandwidth saving applications, as you only need to download the weight of the script (about 4Kb) and let the client's machine generate the images.
熟悉Holder.js 的人会知道，JS 基本上是在客户端创建占位符图像。这具有节省带宽的应用程序，因为您只需要下载脚本的重量（大约 4Kb）并让客户端的机器生成图像。
I want to combine the Glyphicons with holder.js, to produce large high-quality icons on the fly.
我想将 Glyphicons 与 holder.js 结合起来，以即时生成大型高质量图标。
Calling a Glyphicon with Bootstrap is straight forward as follows:
使用 Bootstrap 调用 Glyphicon 很简单，如下所示：
<span class="glyphicon glyphicon-user"></span>
Calling a dynamic image with the text of "Hello World" with holder.js is done as follows:
使用 holder.js 调用带有“Hello World”文本的动态图像的操作如下：
<img data-src="holder.js/200x200/text:Hello World">
I understand that the Bootstrap CSS defines the Glyphicon class as a font, and then uses a pseudo before element to call the specific character defined by a secondary class. See below:
据我了解，Bootstrap CSS 将 Glyphicon 类定义为字体，然后使用伪 before 元素来调用辅助类定义的特定字符。见下文：
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
-webkit-font-smoothing: antialiased;
font-style: normal;
font-weight: normal;
line-height: 1;
}
.glyphicon-user:before {
content: "\e008";
}
How do I go about easily passing a specific glyphiconcharacter in the correct font to holder.js, to output an image icon?
我如何轻松地将正确字体的特定字形字符传递给 holder.js，以输出图像图标？
回答by Samuel Hawksby-Robinson
Ok, so this didn't peak the interest of anyone. But I solved the issue for myself, thought it good etiquette to share my solution with the community.
好的，所以这并没有引起任何人的兴趣。但是我自己解决了这个问题，认为与社区分享我的解决方案是一种很好的礼节。
I had to do two things. After I realised holder.js parses the JavaScript canvas draw into a png image file, the issue was less of a "holder.js" issue and more of a pure JS and web font / fontface issue.
我必须做两件事。在我意识到 holder.js 将 JavaScript 画布绘制解析为 png 图像文件后，问题不再是“holder.js”问题，而更多是纯 JS 和 Web 字体/字体问题。
First thing:I had to explicitly tell the system that the Glyphicons were fonts and what I was referring to them as. I did this with the following CSS:
第一件事：我必须明确地告诉系统 Glyphicons 是字体以及我将它们称为什么。我用以下 CSS 做到了这一点：
@font-face {
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
src: local('Glyphicons Halflings'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype');
}
Second:Once the browser knew the name, location and type of font I was using I could start to use it to pass unicode characters to a JS canvas object. Holder.js has a settings Var which holds an array of "themes", I added the following custom theme to the array:
第二：一旦浏览器知道我使用的字体的名称、位置和类型，我就可以开始使用它来将 unicode 字符传递给 JS 画布对象。Holder.js 有一个设置 Var 包含一个“主题”数组，我将以下自定义主题添加到数组中：
"blueGlyph": {
background: "#3a87ad",
foreground: "#ffffff",
size: 128,
font:"Glyphicons Halflings"
}
Third:Now all I had to do was pass the unicode character to the JS script and it would produce icon images on the fly. The HTML looked as follows:
第三：现在我所要做的就是将 unicode 字符传递给 JS 脚本，它会即时生成图标图像。HTML 如下所示：
<img src="data:image/png;base64," data-src="holder.js/140x140/text:/blueGlyph">
Which produced the following dynamically produced image:
其中产生了以下动态生成的图像：
The key to selecting and passing the unicode character in the correct format for it to be interpreted and drawn was to pass the unicode character using the HTML method. ie &#x*{UNICODE HERE}*; . Or " ;" as per the above example.
以正确的格式选择和传递 unicode 字符以供解释和绘制的关键是使用 HTML 方法传递 unicode 字符。即 &#x*{UNICODE HERE}*; . 或“ ;” 按照上面的例子。
回答by wpsidi
I've been searching on the net but did't find any solution. As imsky said, that comes up as a "rectangle" (missing character). So I tried to create my own solution but this is not creating image with holder.js
我一直在网上搜索，但没有找到任何解决方案。正如 imsky 所说，这是一个“矩形”（缺少字符）。所以我尝试创建自己的解决方案，但这不是使用 holder.js 创建图像
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<span class="big-icon glyphicon glyphicon-glass"></span>
</a>
</div>
and then on css style:
然后在 css 样式上：
<style>
.big-icon{
margin:10px;
font-size:100px;
}
.thumbnail{
text-align:center;
}
</style>
Here's the result:
结果如下：
But I'm still looking solution for: How to use Bootstrap Glyphicons in Holder.js images. Any help will be appreciated.
但我仍在寻找解决方案：How to use Bootstrap Glyphicons in Holder.js images。任何帮助将不胜感激。
Thanks
谢谢
回答by Ranjeet Rana
But why are you so confused when solution is already available. Just remove all holder.js related changes and come back to basics and just put these line at end of the document and see the change......
但是，当解决方案已经可用时，您为什么如此困惑。只需删除所有与 holder.js 相关的更改并回归基础并将这些行放在文档的末尾并查看更改......
$(function() {
$('img').each(function() {
var img = $(this);
img.error(function() {
img.replaceWith('<span class="glyphicon glyphicon-user" style=" background-color: #eee; font-size: 100pt"></span>');
});
});
});
if need more help can mail me to [email protected]
如果需要更多帮助可以给我发邮件到[email protected]
