Icones

Options

Classe Description
<i data-icon='{folder/iconName}'></i> Ajouter une icône.
.icon[5, 10, 15, 25, 30, 35, 40, 45, 50, 60, 70, 80, 90, 100, 125, 150, 175, 200, 250] Indiquer la hauteur de l'icône.
Par défaut la hauteur est égale à la taille de la police (de l'élément ou hérité).
.iconMiddle Centre verticalement l'icone. Le parent doit avoir une hauteur définie.

Complémentarité intérésante avec .top, .bottom, .baseline.

Par défaut, les icones ont un vertical-align: middle.

Packs d'icônes disponibles :

  • Font awesome regular : fa/
  • Font awesome light : fal/
  • font awesome solid : fas/
  • font awesome brands: fab/
  • Social icons : social/

Si data-icon commence par "/", alors les icones seront cherchés à la racine du site courant.

Javascript

Fonctions Description
sk.Icons.init(container) Initialise les icones situés dans le conteneur.
sk.Icons.load( svg ou i, icon(option) ) Charge ou remplace une icone.

Exemples

Avec texte

Hauteur hérité

Carré

Paysage

Portrait

Hauteur de l'icone définie

Carré

Paysage

Portrait

Vertical-align

Normal

Baseline

Top

Bottom

Texte multilignes

Lorem ipsum défaut sed do eiusmod tempor baseline incididunt ut labore top quis nostrud bottom nisi ut aliquip.
Duis aute irure dolor icon25 in reprehenderit in esse cillum contactsurikat.fr dolore eu fugiat nulla pariatur.

Titres

Home

Home

Home

Home

Home
Home
<h4>Hauteur hérité</h4>
<div class="grid4 gutter">
    <div>
        <p><i data-icon="fal/square-full"></i> Carré</p>
    </div>
    <div>
        <p><i data-icon="fal/rectangle-wide"></i> Paysage</p>
    </div>
    <div>
        <p><i data-icon="fal/rectangle-portrait"></i> Portrait</p>
    </div>
</div>

<h4>Hauteur de l'icone définie</h4>
<div class="grid4 gutter">
    <div>
        <p><i class="icon30" data-icon="fal/square-full"></i> Carré</p>
    </div>
    <div>
        <p><i class="icon30" data-icon="fal/rectangle-wide"></i> Paysage</p>
    </div>
    <div>
        <p><i class="icon30" data-icon="fal/rectangle-portrait"></i> Portrait</p>
    </div>
</div>

<h4>Vertical-align</h4>
<div class="grid3 gutter">
    <div>
        <p><i data-icon="fal/square-full"></i> Normal</p>
    </div>
    <div>
        <p><i class="baseline" data-icon="fal/square-full"></i> Baseline</p>
    </div>
    <div>
        <p><i class="top" data-icon="fal/square-full"></i> Top</p>
    </div>
    <div>
        <p><i class="middle" data-icon="fal/square-full"></i> Bottom</p>
    </div>
</div>



<h4>Texte multilignes</h4>
<p>
    Lorem ipsum <i class="red" data-icon="fal/square-full"></i> <span class="red">défaut</span> sed do eiusmod tempor <i class="baseline red" data-icon="fal/square-full"></i> <span class="red">baseline</span> incididunt ut labore <i class="top red" data-icon="fal/square-full"></i> <span class="red">top</span> quis nostrud <i class="bottom red" data-icon="fal/square-full"></i> <span class="red">bottom</span> nisi ut aliquip.<br/>
    Duis aute irure dolor <i class="icon25 red" data-icon="fal/square-full"></i> <span class="red">icon25</span> in reprehenderit in esse cillum <span class="red">contact</span><i class="red" data-icon="fal/at"></i><span class="red">surikat.fr</span> dolore eu fugiat nulla pariatur.<br/>
</p>

<h4>Titres</h4>
<h1><i class="baseline" data-icon="fal/home"></i> Home</h1>
<h2><i class="baseline" data-icon="fal/home"></i> Home</h2>
<h3><i class="baseline" data-icon="fal/home"></i> Home</h3>
<h4><i class="baseline" data-icon="fal/home"></i> Home</h4>
<h5><i class="baseline" data-icon="fal/home"></i> Home</h5>
<h6><i class="baseline" data-icon="fal/home"></i> Home</h6>

iconMiddle

Button

Button

Button

<div class="bgColor1 white margin heightXS center">
    <i class="iconMiddle" data-icon="fal/user"></i>
    <i class="icon30 iconMiddle" data-icon="fal/bars"></i>
    <i class="icon35 iconMiddle" data-icon="fal/square-full"></i>
    <i class="icon40 iconMiddle rounded bgWhite color1" data-icon="fal/user"></i>
    <i class="icon40 iconMiddle rounded bgRed white" data-icon="fal/bars"></i>
</div>

<p class="btn"><i class="iconMiddle" data-icon="fal/search"></i> Button</p>
<p class="btn bgColor1">Button <i class="iconMiddle" data-icon="fal/chevron-right"></i></p>
<p class="btn"><i class="iconMiddle color1" data-icon="fal/check"></i> Button</p>

Dans le flux

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<div class="grid4 gutter center">
    <div>
        <i class="icon70 color1"  data-icon="fal/home"></i>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
    </div>
    <div>
        <i class="icon70 color1" data-icon="fal/ad"></i>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div>
        <i class="icon70 color1" data-icon="fal/battery-half"></i>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    </div>
</div>

Tailles

<i class="icon5"   data-icon="fal/home"></i>
<i class="icon10"  data-icon="fal/home"></i>
<i class="icon15"  data-icon="fal/home"></i>
<i class="icon20"  data-icon="fal/home"></i>
<i class="icon25"  data-icon="fal/home"></i>
<i class="icon30"  data-icon="fal/home"></i>
<i class="icon35"  data-icon="fal/home"></i>
<i class="icon40"  data-icon="fal/home"></i>
<i class="icon45"  data-icon="fal/home"></i>
<i class="icon50"  data-icon="fal/home"></i>
<i class="icon60"  data-icon="fal/home"></i>
<i class="icon70"  data-icon="fal/home"></i>
<i class="icon80"  data-icon="fal/home"></i>
<i class="icon90"  data-icon="fal/home"></i>
<i class="icon100" data-icon="fal/home"></i>
<i class="icon125" data-icon="fal/home"></i>
<i class="icon150" data-icon="fal/home"></i>
<i class="icon175" data-icon="fal/home"></i>
<i class="icon200" data-icon="fal/home"></i>
<i class="icon250" data-icon="fal/home"></i>

Style

<i class="icon50 bgRed white" data-icon="fal/home"></i>
<i class="icon50 rounded bgRed white" data-icon="fal/home"></i>
<i class="icon50 red" data-icon="fal/home"></i>
<i class="icon50 rounded bgRed white" data-icon="fal/arrow-alt-circle-up"></i>
<i class="icon50 rounded bgRed white" data-icon="fal/square-full"></i>
<i class="icon50 blue" data-icon="fab/facebook"></i>

Icones en couleurs

<i class="icon50" data-icon="social/facebook"></i>
<i class="icon50 rounded bgWhite shadow" data-icon="social/facebook"></i>
<i class="icon50" data-icon="social/amazon"></i>
<i class="icon50 rounded bgWhite shadow" data-icon="social/amazon"></i>

Ajout d'icônes

<i class="icon200" data-icon="/web/icons/rocket"></i>

Javascript