如何在Holder.js图像中使用Bootstrap Glyphicons

Question

我正在使用Bootstrap构建项目的前端，我希望使用3.0.0中找到的Glyphicons而不是通常的文本。我该怎么做？

熟悉Holder.js的人会知道JS基本上会在客户端创建占位符图像。这有一个有用的带宽节省应用程序，因为你只需要下载脚本的重量（大约4Kb）并让客户机器生成图像。

我希望将Glyphicons与holder.js结合起来，以便即时生成大量高质量的图标。

使用Bootstrap调用Glyphicon如下：

<span class="glyphicon glyphicon-user"></span>

使用holder.js调用带有“Hello World”文本的动态图像，如下所示：

<img data-src="holder.js/200x200/text:Hello World">

我知道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";
}

如何轻松地将正确字体中的特定 glyphicon 字符传递给holder.js，以输出图像图标？

Answer 1

好的，所以这并没有引起任何人的兴趣。但我为自己解决了这个问题，认为与社区分享我的解决方案是一种很好的礼仪。

我必须做两件事。在我意识到holder.js将JavaScript画布绘制解析为png图像文件后，问题不再是“holder.js”问题，而是更多的纯JS和Web字体/字体问题。

第一件事：我必须明确告诉系统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');
        }

第二：一旦浏览器知道我使用的字体的名称，位置和类型，我就可以开始使用它将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:&#xe093;/blueGlyph">

其中产生了以下动态生成的图像：

以正确的格式选择和传递unicode字符以便解释和绘制的关键是使用HTML方法传递unicode字符。即＆amp;＃x * {UNICODE HERE} *; 。或者“＆amp;＃xe093;”按照上面的例子。

Here's the fiddle if you want to mess around with it.

Answer 2

我一直在网上搜索，但没有找到任何解决方案。正如imsky所说，这是一个＆＃34;矩形＆＃34; （缺少字符）。所以我尝试创建自己的解决方案，但这不是用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图像中使用Bootstrap Glyphicons。任何帮助将不胜感激。

由于

Answer 3

但是当解决方案已经可用时，你为什么这么困惑。 只需删除所有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