如何在Holder.js图像中使用引导符
我正在用引导带构建一个项目的前端，我希望使用在3.0.0中找到的糖糖，而不是通常的文本。我该怎么做？
熟悉Holder.js的人会知道JS基本上会在客户端创建位置持有者图像。这样可以节省应用程序的带宽，因为您只需要下载脚本的重量(大约4Kb)，并让客户端的机器生成图像。
我想结合的糖图标和holder.js，以生产大型高质量的图标在飞行。
用引导符直接调用糖苷图标如下所示：
<span class="glyphicon glyphicon-user"></span>使用holder.js调用"Hello“文本的动态图像如下所示：
<img data-src="holder.js/200x200/text:Hello World">我知道引导CSS定义了一个字体，然后使用一个伪前元素来调用第二个类定义的特定字符。见下文：
.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";
}如何轻松地将特定的图标字符以正确的字体传递给holder.js，以输出图像图标？
回答 3
Stack Overflow用户
发布于 2013-10-09 12:46:12
好吧，所以这并没有引起任何人的兴趣。但我自己解决了这个问题，认为与社区分享我的解决方案是很好的礼节。
我不得不做两件事。当我意识到holder.js将JavaScript画布绘图解析成一个png图像文件后，问题不再是"holder.js“问题，而是一个纯粹的JS和web字体/字体问题。
第一件事：，我必须明确地告诉系统，砂糖图标是字体，我指的是什么。我使用以下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');
}第二:一旦浏览器知道了我使用的字体的名称、位置和类型，我就可以开始使用它将unicode字符传递给JS对象。Holder.js有一个包含“主题”数组的设置Var，我在数组中添加了以下自定义主题：
"blueGlyph": {
background: "#3a87ad",
foreground: "#ffffff",
size: 128,
font:"Glyphicons Halflings"
}第三：现在所要做的就是将unicode字符传递给JS脚本，它将动态生成图标图像。HTML看起来如下：
<img src="data:image/png;base64," data-src="holder.js/140x140/text:/blueGlyph">它产生了以下动态生成的图像：
选择和传递要解释和绘制的正确格式的unicode字符的关键是使用HTML方法传递unicode字符。ie &#x*{UNICODE这里}*；或";“，如上面的示例所示。
这是小提琴，如果你想把它弄乱的话。
Stack Overflow用户
发布于 2014-07-18 15:21:48
我一直在网上搜索，但没有找到任何解决办法。正如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>然后在css样式上：
<style>
.big-icon{
margin:10px;
font-size:100px;
}
.thumbnail{
text-align:center;
}
</style>结果如下：
但是，我仍然在寻找解决方案:如何在Holder.js图像中使用引导符。任何帮助都将不胜感激。
谢谢
Stack Overflow用户
发布于 2014-12-20 13:58:30
但是，当解决方案已经可用时，您为什么会如此困惑。只需删除所有与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>');
});
});
});如果需要更多的帮助，可以把我邮寄到ranjeet1985@gmail.com
https://stackoverflow.com/questions/19250594
复制相似问题
腾讯云开发者
