如何在 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 和网络字体/字体问题。

第一件事：我必须明确告诉系统 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 字符。即 *{UNICODE HERE}*; .或“”按照上面的例子。

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

Answer 2

我一直在网上搜索，但没有找到任何解决方案。正如 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 图像中使用 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