+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : Bootstrap: glyphicon custom (/showthread.php?tid=7513)
Pages :
1
2
RE: Bootstrap: glyphicon custom - @lucard - 25-11-2015
Heu... les fichiers .eot, woff, .ttf sont des polices d'écritures... alors ça n'a rien à voir avec des "images"...
Pour "accueil" tu as un <span> avec un ::before qui contient le caractère : (pour contact c'est le caractère : ✉ )
.glyphicon-home::before {
content: "";
}qui est écrit avec la police Glyphicons Halflings (en .ttf, woof, ou oet suivant les navigateurs)
.glyphicon {
font-family: "Glyphicons Halflings";
font-style: normal;
font-weight: normal;
line-height: 1;y'a pas d'image.
si tu veux remplacer ça par une image:
.glyphicon-home {
display: block;
height: 30px;
width: 30px;
background: url("http://www.jeuweb.org/images/forum_icon_sprite.png") 0 0px;
}
et les lignes
Code :
.glyphicon-*******::before {
content: "✉";}RE: Bootstrap: glyphicon custom - Xenos - 25-11-2015
Note qu'il existe des scripts faisant le travail de génération du CSS à partir d'une sprite PNG (à condition surement de donner l'URI de la sprite, la taille d'une sprite, et le nombre de lignes/colonnes de la sprite), ce qui évite de le faire à la main. Après, si t'as 4 icônes, c'est pas la mort, mais si t'en as 400, cela deviendra utile.
RE: Bootstrap: glyphicon custom - hercull - 26-11-2015
Merci pour votre aide cela fonctionne pour un icône simple, je vais regarder pour les scripts de génération du CSS à partir d'une sprite PNG, mais si tu en a sous la main je suis preneur.
Cordialement.