Utilisateur:Momo50/MediaWiki Pivot Skin/Exemples Font Awesome 4.0.7/fr

Pour utiliser les fonctionnalités de Foreground pour les titres de la page d'accueil 2019

class des icones Font Awesome v4.7.0 (fa-nom-icone)
Exemples : class="fa fa-align-justify fa-lg" donne

Si vous modifiez la taille de la police du conteneur de l'icône, celle-ci s'agrandit. La même chose vaut pour la couleur, l'ombre portée et tout ce qui est hérité à l'aide de CSS.

Icônes de base

fa-camera-retro

Vous pouvez placer les icônes Font Awesome presque n'importe où en utilisant le préfixe CSS fa et le nom-de-l'icône. Font Awesome est conçu pour être utilisé avec des éléments en ligne (nous aimons la balise <i> pour la brièveté, mais utiliser un <span> est plus correct sémantiquement).

Icônes plus grandes

fa-lg

fa-2x

fa-3x

fa-4x

fa-5x

Pour augmenter la taille des icônes par rapport à leur conteneur, utilisez les classes fa-lg (augmentation de 33%), fa-2x, fa-3x, fa-4x ou fa-5x.

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

Si vos icônes sont coupées en haut et en bas, assurez-vous d'avoir une hauteur de ligne suffisante.

Icônes à largeur fixe

   Home
   Library
   Applications
   Settings

Utilisez fa-fw pour définir des icônes à une largeur fixe. Idéal à utiliser lorsque différentes largeurs d'icônes nuisent à l'alignement. Particulièrement utile dans des choses comme les listes de navigation et les groupes de listes.

<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>  Home</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>  Library</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>  Applications</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>  Settings</a>
</div>

Icônes de liste

List icons
can be used
as bullets
in lists

Utilisez fa-ul et fa-li pour remplacer facilement les puces par défaut dans les listes non ordonnées.

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
  <li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>

Icones Bordered & Pulled

... citation texte ...

Citation texte.

Utilisez fa-border et fa-pull-right ou fa-pull-left pour des guillemets faciles à tirer ou des icônes d'article.

<i class="fa fa-quote-left fa-3x fa-pull-left fa-border" aria-hidden="true"></i>
... citation texte ...

Citation texte.

Icônes Animées

Loading...

Utilisez la classe fa-spin pour faire pivoter n’importe quelle icône, puis utilisez fa-pulse pour la faire pivoter en 8 étapes. Fonctionne bien avec fa-spinner, fa-refresh et fa-cog.

<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

Tourné et retourné

normal
fa-rotate-90

fa-rotate-180

fa-rotate-270

fa-flip-horizontal

fa-flip-vertical

Pour faire pivoter et retourner des icônes de manière arbitraire, utilisez les classes fa-rotate-* (rotation) et fa-flip-* (retournement).

<i class="fa fa-shield"></i> normal<br>
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i> fa-flip-vertical

Icônes empilées

fa-twitter sur fa-square-o
fa-flag sur fa-circle
fa-terminal sur fa-square
fa-ban sur fa-camera

Pour empiler plusieurs icônes, utilisez la classe fa-stack sur le parent, fa-stack-1x pour l'icône de taille normale et fa-stack-2x pour la plus grande icône. fa-inverse peut être utilisé comme couleur d'icône alternative. Vous pouvez même créer des classes d'icônes plus volumineuses sur le parent pour mieux contrôler le dimensionnement.

<span class="fa-stack fa-lg"><i class="fa fa-square-o fa-stack-2x"></i><i class="fa fa-twitter fa-stack-1x"></i></span>fa-twitter sur fa-square-o<br>
<span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-flag fa-stack-1x fa-inverse"></i></span>fa-flag sur fa-circle<br>
<span class="fa-stack fa-lg"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-terminal fa-stack-1x fa-inverse"></i></span>fa-terminal sur fa-square<br>
<span class="fa-stack fa-lg"><i class="fa fa-camera fa-stack-1x"></i><i class="fa fa-ban fa-stack-2x text-danger"></i></span>fa-ban sur fa-camera

Toutes les classes

Bootstrap

Classes texte

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-muted

.text-white

Classes boutons

Adhérer

Adhérer (via helloasso)

Utilisateur