Les glyphes-icônes intégrées à Yeswiki
Les glyphes-icônes ne se comportent pas comme une image classique mais plutôt comme les caractères d'une police web.Elles peuvent être utilisées dans les menus de Yeswiki (le petit home, par exemple), ou dans les boutons.
Emplacement des fichiers de glyphes-icônes
Les fichiers des deux planches de glyphes-icônes se situent dans tools/templates/presentation/images- glyphicons-halflings.png (icônes noires sur fond blanc)
- glyphicons-halflings.white.png (icône blanches sur fond de couleur, ou "inverse")
Chacune des glyphes-icônes contenues dans ces planches est "stylée" par des règles CSS contenues dans le feuille de style de bootstrap (tools/templates/presentation/styles/bootstrap.min.css) et regroupées dans une classe, par exemple, de cette manière :
.glyphicon glyphicon-glass { background-position:0 0 }
L'aspect global des glyphes-icônes suit les règles de tools/templates/presentation/styles/bootstrap.min.css :
Les glyphes-icônes noires
[class^="glyphicon glyphicon-"],[class*=" glyphicon glyphicon-"] { display:inline-block; width:14px; height:14px; margin-top:1px; *margin-right:.3em; line-height:14px; vertical-align:text-top; background-image:url("../images/glyphicons-halflings.png"); background-position:14px 14px; background-repeat:no-repeat }
Les glyphes-icônes blanches
.glyphicon glyphicon-white,.nav-pills>.active>a>[class^="glyphicon glyphicon-"],.nav-pills>.active>a>[class*=" glyphicon glyphicon-"],.nav-list>.active>a>[class^="glyphicon glyphicon-"],.nav-list>.active>a>[class*=" glyphicon glyphicon-"],.navbar-inverse .nav>.active>a>[class^="glyphicon glyphicon-"],.navbar-inverse .nav>.active>a>[class*=" glyphicon glyphicon-"],.dropdown-menu>li>a:hover>[class^="glyphicon glyphicon-"],.dropdown-menu>li>a:focus>[class^="glyphicon glyphicon-"],.dropdown-menu>li>a:hover>[class*=" glyphicon glyphicon-"],.dropdown-menu>li>a:focus>[class*=" glyphicon glyphicon-"],.dropdown-menu>.active>a>[class^="glyphicon glyphicon-"],.dropdown-menu>.active>a>[class*=" glyphicon glyphicon-"],.dropdown-submenu:hover>a>[class^="glyphicon glyphicon-"],.dropdown-submenu:focus>a>[class^="glyphicon glyphicon-"],.dropdown-submenu:hover>a>[class*=" glyphicon glyphicon-"],.dropdown-submenu:focus>a>[class*=" glyphicon glyphicon-"] { background-image:url("../images/glyphicons-halflings-white.png") }
Liste, code HTML et syntaxe wikini des glyphes-icônes
Code HTML de base
<i class="glyphicon glyphicon-glass"></i>
Code HTML des boutons icônes
<button><i class="glyphicon glyphicon-glass"></i></button>
Syntaxe wikini de base bouton icône
{{button link="#" class="btn" icon="glass " nobtn="0"}}
Liste des glyphes-icônes
<i class="glyphicon glyphicon-glass"></i> {{button link="#" class="btn" icon="glass" nobtn="0"}}
<i class="glyphicon glyphicon-music"></i> {{button link="#" class="btn" icon="music" nobtn="0"}}
<i class="glyphicon glyphicon-search"></i> {{button link="#" class="btn" icon="search" nobtn="0"}}
<i class="glyphicon glyphicon-envelope"></i> {{button link="#" class="btn" icon="envelope" nobtn="0"}}
<i class="glyphicon glyphicon-heart"></i> {{button link="#" class="btn" icon="heart" nobtn="0"}}
<i class="glyphicon glyphicon-star"></i> {{button link="#" class="btn" icon="star" nobtn="0"}}
<i class="glyphicon glyphicon-star-empty"></i> {{button link="#" class="btn" icon="star-empty" nobtn="0"}}
<i class="glyphicon glyphicon-user"></i> {{button link="#" class="btn" icon="user" nobtn="0"}}
<i class="glyphicon glyphicon-film"></i> {{button link="#" class="btn" icon="film" nobtn="0"}}
<i class="glyphicon glyphicon-th-large"></i> {{button link="#" class="btn" icon="th-large" nobtn="0"}}
<i class="glyphicon glyphicon-th"></i> {{button link="#" class="btn" icon="th" nobtn="0"}}
<i class="glyphicon glyphicon-th-list"></i> {{button link="#" class="btn" icon="th-list" nobtn="0"}}
<i class="glyphicon glyphicon-ok"></i> {{button link="#" class="btn" icon="ok" nobtn="0"}}
<i class="glyphicon glyphicon-remove"></i> {{button link="#" class="btn" icon="remove" nobtn="0"}}
<i class="glyphicon glyphicon-zoom-in"></i> {{button link="#" class="btn" icon="zoom-in" nobtn="0"}}
<i class="glyphicon glyphicon-zoom-out"></i> {{button link="#" class="btn" icon="zoom-out" nobtn="0"}}
<i class="glyphicon glyphicon-off"></i> {{button link="#" class="btn" icon="off" nobtn="0"}}
<i class="glyphicon glyphicon-signal"></i> {{button link="#" class="btn" icon="signal" nobtn="0"}}
<i class="glyphicon glyphicon-cog"></i> {{button link="#" class="btn" icon="cog" nobtn="0"}}
<i class="glyphicon glyphicon-trash"></i> {{button link="#" class="btn" icon="trash" nobtn="0"}}
<i class="glyphicon glyphicon-home"></i> {{button link="#" class="btn" icon="home" nobtn="0"}}
<i class="glyphicon glyphicon-file"></i> {{button link="#" class="btn" icon="file" nobtn="0"}}
<i class="glyphicon glyphicon-time"></i> {{button link="#" class="btn" icon="time" nobtn="0"}}
<i class="glyphicon glyphicon-road"></i> {{button link="#" class="btn" icon="road" nobtn="0"}}
<i class="glyphicon glyphicon-download-alt"></i> {{button link="#" class="btn" icon="download-alt" nobtn="0"}}
<i class="glyphicon glyphicon-download"></i> {{button link="#" class="btn" icon="download" nobtn="0"}}
<i class="glyphicon glyphicon-upload"></i> {{button link="#" class="btn" icon="upload" nobtn="0"}}
<i class="glyphicon glyphicon-inbox"></i> {{button link="#" class="btn" icon="inbox" nobtn="0"}}
<i class="glyphicon glyphicon-play-circle"></i> {{button link="#" class="btn" icon="play-circle" nobtn="0"}}
<i class="glyphicon glyphicon-repeat"></i> {{button link="#" class="btn" icon="repeat" nobtn="0"}}
<i class="glyphicon glyphicon-refresh"></i> {{button link="#" class="btn" icon="refresh" nobtn="0"}}
<i class="glyphicon glyphicon-list-alt"></i> {{button link="#" class="btn" icon="list-alt" nobtn="0"}}
<i class="glyphicon glyphicon-lock"></i> {{button link="#" class="btn" icon="lock" nobtn="0"}}
<i class="glyphicon glyphicon-flag"></i> {{button link="#" class="btn" icon="flag" nobtn="0"}}
<i class="glyphicon glyphicon-headphones"></i> {{button link="#" class="btn" icon="headphones" nobtn="0"}}
<i class="glyphicon glyphicon-volume-off"></i> {{button link="#" class="btn" icon="volume-off" nobtn="0"}}
<i class="glyphicon glyphicon-volume-down"></i> {{button link="#" class="btn" icon="volume-down" nobtn="0"}}
<i class="glyphicon glyphicon-volume-up"></i> {{button link="#" class="btn" icon="volume-up" nobtn="0"}}
<i class="glyphicon glyphicon-qrcode"></i> {{button link="#" class="btn" icon="qrcode" nobtn="0"}}
<i class="glyphicon glyphicon-barcode"></i> {{button link="#" class="btn" icon="barcode" nobtn="0"}}
<i class="glyphicon glyphicon-tag"></i> {{button link="#" class="btn" icon="tag" nobtn="0"}}
<i class="glyphicon glyphicon-tags"></i> {{button link="#" class="btn" icon="tags" nobtn="0"}}
<i class="glyphicon glyphicon-book"></i> {{button link="#" class="btn" icon="book" nobtn="0"}}
<i class="glyphicon glyphicon-bookmark"></i> {{button link="#" class="btn" icon="bookmark" nobtn="0"}}
<i class="glyphicon glyphicon-print"></i> {{button link="#" class="btn" icon="print" nobtn="0"}}
<i class="glyphicon glyphicon-camera"></i> {{button link="#" class="btn" icon="camera" nobtn="0"}}
<i class="glyphicon glyphicon-font"></i> {{button link="#" class="btn" icon="font" nobtn="0"}}
<i class="glyphicon glyphicon-bold"></i> {{button link="#" class="btn" icon="bold" nobtn="0"}}
<i class="glyphicon glyphicon-italic"></i> {{button link="#" class="btn" icon="italic" nobtn="0"}}
<i class="glyphicon glyphicon-text-height"></i> {{button link="#" class="btn" icon="text-height" nobtn="0"}}
<i class="glyphicon glyphicon-text-width"></i> {{button link="#" class="btn" icon="text-width" nobtn="0"}}
<i class="glyphicon glyphicon-align-left"></i> {{button link="#" class="btn" icon="align-left" nobtn="0"}}
<i class="glyphicon glyphicon-align-center"></i> {{button link="#" class="btn" icon="align-center" nobtn="0"}}
<i class="glyphicon glyphicon-align-right"></i> {{button link="#" class="btn" icon="align-right" nobtn="0"}}
<i class="glyphicon glyphicon-align-justify"></i> {{button link="#" class="btn" icon="align-justify" nobtn="0"}}
<i class="glyphicon glyphicon-list"></i> {{button link="#" class="btn" icon="list" nobtn="0"}}
Travaux pratiques
Intégration dans les boutons
L'aspect de base des boutons contenant une glyphe-icône est déterminé par les règles de la classe btn de bootstrap.min.css; mais d'autres classes bootstrap permettent d'intervenir sur la couleur de fond (btn-primary, btn-danger, btn-warning, btn-success,btn-info,btn-inverse) ou la taille (btn-large,btn-small, btn-mini,btn-block) ou la position (pull-right); voir : Documentation Boutons de yeswiki.netIl est toujours possible de créer de nouvelles classes (pour obtenir d'autres couleurs de fond ou arrière-plan coloré) dans votre feuille de style personnalisée en utilisant pour modèle les classes pré-configurées de bootstrap.min.css.
Construction d'un menu
Code HTML
Menu horizontal""<div class="btn-toolbar"> <div class="btn-group"> <a class="btn" href="wakka.php?wiki=PagePrincipalE"><i class="glyphicon glyphicon-home"></i></a> <a class="btn" href="#"><i class="glyphicon glyphicon-heart"></i></a> <a class="btn" href="#"><i class="glyphicon glyphicon-globe"></i></a> <a class="btn" href="#"><i class="glyphicon glyphicon-pencil"></i></a> <a class="btn" href="#"><i class="glyphicon glyphicon-book"></i></a> <a class="btn" href="#"><i class="glyphicon glyphicon-music"></i></a> <a class="btn" href="#"><i class="glyphicon glyphicon-picture"></i></a> <a class="btn" href="#"><i class="glyphicon glyphicon-envelope"></i></a> </div> </div>""
Menu vertical
""<ul class="unstyled"> <li><a class="btn" href="wakka.php?wiki=PagePrincipalE"><i class="glyphicon glyphicon-home"></i></a></li> <li><a class="btn" href="#"><i class="glyphicon glyphicon-heart"></i></a></li> <li><a class="btn" href="#"><i class="glyphicon glyphicon-globe"></i></a></li> <li><a class="btn" href="#"><i class="glyphicon glyphicon-pencil"></i></a></li> <li><a class="btn" href="#"><i class="glyphicon glyphicon-book"></i></a></li> <li><a class="btn" href="#"><i class="glyphicon glyphicon-music"></i></a></li> <li><a class="btn" href="#"><i class="glyphicon glyphicon-picture"></i></a></li> <li><a class="btn" href="#"><i class="glyphicon glyphicon-envelope"></i></a></li> </ul>""
Syntaxe wikini
Menu horizontal{{button link="#" class="btn" icon="home" nobtn="0"}}{{button link="#" class="btn" icon="heart" nobtn="0"}}{{button link="#" class="btn" icon="globe" nobtn="0"}}{{button link="#" class="btn" icon="pencil" nobtn="0"}}{{button link="#" class="btn" icon="book" nobtn="0"}}{{button link="#" class="btn" icon="music" nobtn="0"}}{{button link="#" class="btn" icon="picture" nobtn="0"}}{{button link="#" class="btn" icon="envelope" nobtn="0"}}
Attention de ne pas laisser d'espace entre la fermeture et l'ouverture des accolades
Menu vertical
{{button link="#" class="btn" icon="home" nobtn="0"}} {{button link="#" class="btn" icon="heart" nobtn="0"}} {{button link="#" class="btn" icon="globe" nobtn="0"}} {{button link="#" class="btn" icon="pencil" nobtn="0"}} {{button link="#" class="btn" icon="book" nobtn="0"}} {{button link="#" class="btn" icon="music" nobtn="0"}} {{button link="#" class="btn" icon="picture" nobtn="0"}} {{button link="#" class="btn" icon="envelope" nobtn="0"}}
Voir aussi Span10 pour placer le menu à gauche ou à droite
Boutons arrondis
- Il est possible de modifier l'aspect visuel des boutons du menu ci-dessus en introduisant dans votre feuille de style personnalisée une classe complémentaire qui définit un aspect arrondi pour la classe btn-mini (par exemple) :
Code CSS
.circle { border-radius:180px; width:12px; padding:8px 16px 8px 12px ;/*haut, droit, bas, gauche*/ }
Code HTML
""<a class="btn btn-mini circle" href="#"><i class="glyphicon glyphicon-heart glyphicon glyphicon-white"></i></a>""
Syntaxe wikini
{{button link="#" class="btn btn-mini btn-danger circle" icon="heart" nobtn="0"}}
En situation réelle, remplacer le dièse (#) par le nom wiki de la page à lier