+- 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
Bootstrap: glyphicon custom - hercull - 24-11-2015
J'ai une autre question, comment utilisez-vous des glyphicon qui ne se trouve pas dans bootsrap?
J'ai téléchargé des fichier PSD contenant des dizaines de glyphicons, et j'aimerai les utiliser, il y a t il un moyen plus simple que de les découper un par un? comme pour ceux du bootsrap en appelant des classe par exemple?
Cordialement.
RE: Bootstrap: glyphicon custom - Sephi-Chan - 24-11-2015
Attention de ne pas prendre de mauvaises habitudes à demander de l'aide avant de chercher suffisamment (ou simplement lire la documentation).
RE: Bootstrap: glyphicon custom - hercull - 25-11-2015
J'ai bien cherché mais je ne trouve que des tutos qui expliquent comment utiliser les glyphicons de bootsrap, rien sur comment utiliser des glyphicon trouver sur le web, si il y a une documentation je suis preneur mais je ne la trouve pas non plus.
Merci de votre aide.
Cordialement.
RE: Bootstrap: glyphicon custom - @lucard - 25-11-2015
Un fichier. psd est un fichier photoshop, pouvant contenir des calques, des effets, des modes de fusions, et d'autres informations (non visibles).
Pour les ouvrir, les éditer, les convertir, il faut utiliser Photoshop. Ou peut-être the Gimp.
RE: Bootstrap: glyphicon custom - Prélude - 25-11-2015
IcoMoon devrait pouvoir régler ton problème... sans problème : https://icomoon.io/
Il s'agit d'une banque de "glyphicons", certains gratuits, d'autres payant. Tu peux sélectionner juste une partie et ne charger que les fichiers correspondants. C'est toujours mieux que d'avoir 300 icons dont 4 sont utilisés...
RE: Bootstrap: glyphicon custom - @lucard - 25-11-2015
Quand tu dis : les découper un par un? comme pour ceux du bootsrap en appelant des classe par exemple?
tu parles de les utiliser comme des sprits ?
avec un contenant vide : <div> ou <li> ou autre. avec un background-image (décalé en fonction de ce que tu veux afficher) ?
ce genre là :
li{
display:bloc;
height:20px;
width:20px;
}
#BtnBack{
background: url(toto.png) 0 0; /* l'image affichée correspond à ce qu'il y a, entre (0,0) et (20,20) [0+20,0+20]*/
}
#BtnNext{
background: url(toto.png) 20px 0; /* l'image affichée correspond à ce qu'il y a, entre (20,0) et (40,20) [20+20,0+20]*/
}
RE: Bootstrap: glyphicon custom - hercull - 25-11-2015
@lucard donc une fois le fichier .psd ouvert avec Photoshop je fait enregistrer pour le web -> png24 -> et j'enregistre, j'ai donc un fichier .png contenant mes icônes, comment je fais appel à ces icônes dans mon code?
Pour Bootsrap c'est tres simple il suffit de faire :
Code :
class="glyphicon glyphicon-book"et, l’icône apparait, est il possible d'utiliser cette méthode avec les icônes du fichier .png du dessus?
Si oui comment?
Si non quel est la manière pour faire appel?
RE: Bootstrap: glyphicon custom - @lucard - 25-11-2015
Oula,
Une fois ouvert avec Photoshop : → Fichier → Enregistrer sous...
.jpg (si c'est un image avec une couleur en fond) le fichier sera plus rapide à charger.
.png (si c'est un fond transparent.)
un fichier image n'a pas de data liée à une partie de son contenu.
une image c'est juste une image peu importe ce qu'il y a dessus, que tu dessines un bateau, un avion, une pelle, un chien, un p¤nis, ou un Raccord Électrique SIMEL 325, ça sera la même chose : y'aura que le nom de l'image qui importe.
Je n'utilises pas Bootstrap, car y'a 95% de chose inutiles.
soit tu donnes un lien vers la page en question.
Soit tu regardes ce à quoi correspond la class .glyphicon glyphicon-book dans le css.
tu auras surement la réponse à ta question.
RE: Bootstrap: glyphicon custom - Ter Rowan - 25-11-2015
(25-11-2015, 04:09 PM)@lucard a écrit : Soit tu regardes ce à quoi correspond la class .glyphicon glyphicon-book dans le css.
tu auras surement la réponse à ta question.
soit c'est ça et rien d'autres en fait
il suffit de remplacer l'image dans le css comme l'a décrit @lucard avant
RE: Bootstrap: glyphicon custom - hercull - 25-11-2015
Voici e qui se trouve dans le bootsrap.css pour glyphicon :
Code :
@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.glyphicon-asterisk:before {
content: "\2a";
}
.glyphicon-plus:before {
content: "\2b";
}
.glyphicon-euro:before,
.glyphicon-eur:before {
content: "\20ac";je confirme il y a bien des fichier .eot , .woff, .woff2, .ttf...
mais les images ne sont pas dans le fichier css, c'est seulement les règles.
Donc si je veux faire appel à mes images par une class je dois créer cette class dans le fichier css en lui donnant le liens de l'image?
Cela fonctionnera peut être pour une seul image dans un png, mais si c'est une image png avec 40 images à l’intérieur comme des sprit comment faire?
Voici le lien : http://checkmonbulletin.fr/notation/index.php