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.net

Il 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