如何在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字符.ie&#x*{UNICODE HERE}*; .或者"" 按照上面的例子.

如果你想搞砸它,这就是小提琴.