Comment utiliser Bootstrap Glyphicons dans Holder.js images

Je suis en train de construire le front-end d'un projet avec Bootstrap et je suis à la recherche d'utiliser le Glyphicons trouvé en 3.0.0 au lieu de texte habituel. Comment puis-je faire?

Ceux d'entre vous familiariser avec Holder.js savez que le JS fondamentalement crée l'emplacement des images sur le côté client. Ceci est utile économie de bande passante des applications, que vous avez seulement besoin de télécharger le poids du script (environ 4 ko) et de laisser l'ordinateur du client de générer l'image.

Je veux combiner les Glyphicons avec holder.js, pour produire de grandes qualité des icônes à la volée.

L'appel d'une Glyphicon avec Bootstrap est simple comme suit:

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

L'appel d'une dynamique de l'image avec le texte "Hello World" avec holder.js se fait comme suit:

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

Je comprends que le Bootstrap CSS définit la Glyphicon classe comme une police, puis utilise un pseudo avant de l'élément d'appeler le caractère spécifique défini par une classe secondaire. Voir ci-dessous:

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

Comment puis-je facilement le passage d'un spécifique glyphicon personnage dans la bonne police pour holder.js, à la sortie d'une icône de l'image?

OriginalL'auteur Samuel Hawksby-Robinson | 2013-10-08

  1. 12

    Ok, donc ce n'était pas le pic de l'intérêt de personne. Mais j'ai résolu le problème pour moi, pensait-il de bon ton de partager ma solution avec la communauté.

    J'ai eu à faire deux choses. Après j'ai réalisé holder.js analyse le JavaScript toile dessiner un fichier image (png, la question est moins "holder.js" et plus d'une pure JS et de polices web /fontface question.

    Première chose: j'avais explicitement indiquer au système que les Glyphicons ont été polices et que je faisais référence à eux comme. Je l'ai fait avec le CSS suivant:

    @font-face {
            font-family: 'Glyphicons Halflings';
            font-style: normal;
            font-weight: normal;
            src: local('Glyphicons Halflings'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype');
        }

    Deuxième: une Fois que le navigateur savait le nom, l'emplacement et le type de police, j'ai été à l'aide que je puisse commencer à l'utiliser pour transmettre des caractères unicode en une JS toile objet. Holder.js a un des paramètres de la Var qui est titulaire d'un tableau des "thèmes", j'ai ajouté ce qui suit thème personnalisé au tableau:

    "blueGlyph": {
        background: "#3a87ad",
        foreground: "#ffffff",
        size: 128,
        font:"Glyphicons Halflings"
    }

    Troisième: Maintenant tout ce que j'avais à faire était de passer le caractère unicode à la JS script, et il serait de produire des images de l'icône à la volée. Le HTML a regardé comme suit:

    <img src="data:image/png;base64," data-src="holder.js/140x140/text:&#xe093;/blueGlyph">

    Qui a produit la suite de façon dynamique produite image:

    Comment utiliser Bootstrap Glyphicons dans Holder.js images

    La clé de la sélection et de passage de caractères unicode dans le format correct pour être interprétée et en a été tirée est de transmettre le caractère unicode à l'aide de la méthode HTML. ie &#x*{UNICODE ICI}*; . Ou "&#xe093 ;", comme dans l'exemple ci-dessus.

    Voici le violon, si vous voulez s'amuser avec elle.

    C'est excellent, je vais regarder dans ce qui en fait un défaut, une partie de Titulaire.
    Mr @imsky lui-même, un plaisir. Je suis heureux que vous l'aimez. Je suis à la recherche pour obtenir les images d'anti-aliasing sur certaines images, il y a quelques très sensible pixellisation sur les bords des caractères. Voici le violon
    Qui se présente comme un "rectangle" (manque de caractère) pour moi, je pense que vous aurez besoin pour accueillir l'exemple vous-même quelque part.
    cette solution ne fonctionne pas. Pouvez-vous nous donner un autre exemple qui fonctionne?

    OriginalL'auteur Samuel Hawksby-Robinson

  2. 2

    J'ai cherché sur le net mais ne trouve pas la solution. Comme imsky dit, qui se présente comme un "rectangle" (caractère manquant). J'ai donc essayé de créer mon propre solution, mais ce n'est pas de la création d'image avec holder.js

    <div class="col-xs-6 col-md-3">
   <a href="#" class="thumbnail">
       <span class="big-icon glyphicon glyphicon-glass"></span>
   </a>
</div>

    puis sur style css:

    <style>
.big-icon{
   margin:10px;
   font-size:100px;
}
.thumbnail{
   text-align:center;
}
</style>

    Voici le résultat:


    Comment utiliser Bootstrap Glyphicons dans Holder.js images

    Mais je suis toujours à la recherche de la solution: Comment utiliser Bootstrap Glyphicons dans Holder.js les images. Toute aide sera appréciée.

    Grâce

    Titulaire de rendu SVG besoin d'un surcroît de travail pour afficher les polices web. La version 2.4 plein webfont support, reportez-vous cette question: github.com/imsky/holder/issues/73

    OriginalL'auteur wpsidi

  3. -1

    Mais pourquoi êtes-vous tellement confus lorsque la solution est déjà disponible.
    Suffit d'enlever toutes holder.js concernant les changements et revenir à l'essentiel et de mettre les ligne à la fin du document et de voir le changement......

     $(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>');
            });
        });
    });

    si besoin de plus d'aide pouvez m'envoyer un mail à [email protected]

    OriginalL'auteur Ranjeet Rana