Wie die Verwendung von Bootstrap Glyphicons in Holder.js Bilder

Baue ich den front-end-ein Projekt mit Bootstrap und ich bin auf der Suche zu verwenden, die Glyphicons gefunden in 3.0.0 statt der üblichen text. Wie kann ich dies tun?

Diejenigen von Ihnen vertraut mit Holder.js, wird wissen, dass JS im Grunde schafft Platzhalter-Bilder, die auf der client-Seite. Dies ist nützlich, um Bandbreite zu sparen-Anwendungen, wie Sie nur herunterladen müssen das Gewicht des Skripts (etwa 4 kB) und lass den client-Rechner erzeugen die Bilder.

Möchte ich kombinieren die Glyphicons mit holder.js produziert mit einem großen, hochwertigen icons on the fly.

Aufruf einer Glyphicon mit Bootstrap ist geradlinig, wie folgt:

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

Berufung ein dynamisches Bild mit dem text "Hallo Welt" mit holder.js wird wie folgt durchgeführt:

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

Verstehe ich, dass die Bootstrap-CSS definiert, die Glyphicon-Klasse als schriftart, und dann wird ein pseudo-element vor Aufruf der spezifische Charakter definiert durch eine sekundäre Klasse. Siehe unten:

.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";
}

Wie gehe ich über die leicht übergeben ein bestimmtes glyphicon Zeichen in die richtige schriftart zu holder.js für Ausgabe ein Bild-Symbol?

InformationsquelleAutor Samuel Hawksby-Robinson | 2013-10-08

12

Ok, also das ist nicht Spitze, das Interesse von jedermann. Aber ich löste das Problem für mich, dachte, es eine gute Etikette zu teilen, meine Lösung mit der community.

Musste ich zwei Dinge tun. Nachdem ich realisiert holder.js parst das JavaScript canvas zeichnen Sie in ein png-Bild-Datei, das Problem war weniger ein "holder.js" Thema und mehr von einer reinen JS-und web font /fontface Problem.

Erste: hatte ich ausdrücklich sagen, dass das Glyphicons wurden Schriften und was war ich auf diese als. Ich Tat dies mit folgenden 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');
        }
```
Zweite: Einmal den browser kannte den Namen, den Standort und die Art der Schrift war ich mit ich beginnen konnte, es zu verwenden, um pass unicode-Zeichen, um eine JS-canvas-Objekt. Holder.js hat einer settings Var mit einer Reihe von "Themen", ich habe Folgendes benutzerdefiniertes Thema, um das array:
```
"blueGlyph": {
        background: "#3a87ad",
        foreground: "#ffffff",
        size: 128,
        font:"Glyphicons Halflings"
    }
```
Dritte: alles was ich Jetzt zu tun hatte, übergeben Sie die unicode-Zeichen auf das JS-script und es würde die Produktion von icon-Bilder on-the-fly. Die HTML-sah wie folgt aus:
```
<img src="data:image/png;base64," data-src="holder.js/140x140/text:&#xe093;/blueGlyph">
```
Produziert die folgenden dynamisch erzeugten Bild:

Die Taste, um die Auswahl und die übergabe der unicode-Zeichen in das richtige format für Sie interpretiert und gezeichnet wurde, übergeben werden, die unicode-Zeichen mit der HTML-Methode. ie &#x*{UNICODE-HIER}*; . Oder "&#xe093 ;", wie in obigen Beispiel.

Hier ist die Geige, wenn Sie wollen, mess around mit ihm.
- Das ist ausgezeichnet, ich werde sehen, was sich machen das ein Standard-Teil der Halter.
- Herr @imsky sich selbst, eine Freude. Ich bin froh, dass es dir gefällt. Ich bin auf der Suche, um Bilder mit anti-Aliasing auf einigen Bildern gibt es einige sehr bemerkbar pixelation auf die Kanten der Zeichen. Hier ist der fiddle
- Das wird als ein "Rechteck" (fehlende Zeichen) für mich, ich denke, Sie müssen zu-host-das Beispiel selbst irgendwo.
- diese Lösung funktioniert nicht. Können Sie uns ein weiteres Beispiel, das funktioniert?
InformationsquelleAutor Samuel Hawksby-Robinson
2

Ich habe lange gesucht im Netz, aber habe keine Lösung. Als imsky sagte, dass wird als ein "Rechteck" (fehlende Zeichen). Also habe ich versucht, um meine eigene Lösung, aber dies ist nicht die Erstellung von Bild-mit holder.js
```
<div class="col-xs-6 col-md-3">
   <a href="#" class="thumbnail">
       <span class="big-icon glyphicon glyphicon-glass"></span>
   </a>
</div>
```
und dann auf css-Stil:
```
<style>
.big-icon{
   margin:10px;
   font-size:100px;
}
.thumbnail{
   text-align:center;
}
</style>
```
Hier ist das Ergebnis:

Aber ich bin noch auf der Suche Lösung für: Wie die Verwendung von Bootstrap Glyphicons in Holder.js Bilder. Jede Hilfe wird geschätzt.

Dank
- Inhaber der SVG-renderer muss zusätzliche Arbeit leisten, um die Anzeige webfonts. Das 2,4-release wird die volle webfont-Unterstützung finden Sie in dieser Ausgabe: github.com/imsky/holder/issues/73
InformationsquelleAutor wpsidi
-1

Aber warum sind Sie so verwirrt, wenn die Lösung bereits vorhanden ist.
Entfernen Sie einfach alle holder.js zugehörigen änderungen und kommen zurück zu den Grundlagen und setzen Sie einfach diese Zeile am Ende des Dokuments, und sehe die änderung......
```
 $(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>');
            });
        });
    });
```
wenn Sie weitere Hilfe benötigen können Sie mir eine mail an [email protected]

InformationsquelleAutor Ranjeet Rana

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.