Prise en main et documentation du pack d'icônes

La structure du pack d'icônes [Iconsbag]

  • icon-in-the-bag -- Dossier racine
    • font-and-toolkit -- Fichiers de font/police + fichiers du toolkit CSS
      • demo-files -- Fichiers requis pour la démo (voir demo.html ci-dessous)
        • demo.css
        • demo.js
      • fonts -- Fichiers de font/police
        • iconsbag.eot
        • iconsbag.ttf
        • iconsbag.woff
        • iconsbag.svg
      • iconsbag-less -- Le toolkit CSS adapté à LESS
        • _font.less
        • _helpers.less
        • _variables.less
        • style.less
      • iconsbag-sass -- Le toolkit CSS adapté à SASS
        • _font.scss
        • _helpers.scss
        • _variables.scss
        • style.scss
      • iconsbag-stylus -- Le toolkit CSS adapté à STYLUS
        • _font.styl
        • _helpers.styl
        • _variables.styl
        • style.styl
      • demo.html -- Démo/affichage des icônes du pack (généré par Icomoon Icomoon)
      • EN_open_demo.html_with_Firefox.txt -- Instructions pour ouvrir demo.html avec Firefox (en Anglais)
      • FR_ouvrir_demo.html_avec_Firefox.txt -- Instructions pour ouvrir demo.html avec Firefox (en Français)
      • iconsbag.css -- Le fichier de style CSS
    • icons -- Toutes les icônes (.svg + .png)
      • icon-x -- Exemple de dossier d'icône (contient le(s) fichier(s) .svg + tous les fichiers .png)
        • icon-x.svg
        • icon-x-32px.png
        • icon-x-64px.png
        • icon-x-128px.png
        • icon-x-256px.png
        • (...)
      • (...)
    • icons-for-font -- Toutes les icônes (.svg) preparées pour être utilisées dans une font/police d'icônes
      • filled -- Toutes les icônes préparées de type "rempli"
      • outline -- Toutes les icônes préparées de type "contour"
    • EN_Extended_License.txt -- Contrat de Licence (License Étendue) en Anglais
    • EN_Standard_License.txt -- Contrat de Licence (License Stnadard) en Anglais
    • FR_Licence_Etendue.txt -- Contrat de Licence (License Étendue) en Français
    • FR_Licence_Standard.txt -- Contrat de Licence (License Standard) en Français
    • iconsbag_updates.txt -- Liste des mises à jour du pack

Comment intégrer la font/police [avec CSS]

  1. Copiez le dossier iconsbag/font-and-toolkit/fonts à la racine de votre projet.
  2. Copiez le fichier iconsbag/font-and-toolkit/iconsbag.css à la racine de votre projet.
  3. Dans la balise <head></head> de votre fichier HTML, importez iconsbag.css comme ceci :
  4. 
        <head>
          // Si la structure de votre projet est différente, changez le chemin "iconsbag.css" ci-dessous.
          <link rel="stylesheet" href="iconsbag.css">
        </head>
        
  5. Si la structure de votre projet est différente, changez le chemin fonts/iconsbag. dans le fichier iconsbag.css
  6. 
        @font-face {
          font-family: 'iconsbag';
          src: url('fonts/iconsbag.eot');
          src: url('fonts/iconsbag.eot#iefix') format('embedded-opentype'),
            url('fonts/iconsbag.ttf') format('truetype'),
            url('fonts/iconsbag.woff') format('woff'),
            url('fonts/iconsbag.svg#iconsbag') format('svg');
          font-weight: normal;
          font-style: normal;
        }
        
  7. Allez à la page des icônes et trouvez quelques belles icônes à utiliser

Comment intégrer la font/police [avec SASS/LESS/STYLUS]

L'exemple suivant montre les étapes avec SASS (pour LESS et STYLUS, remplacez le nom de dossier iconsbag-sass par iconsbag-less ou iconsbag-stylus le nom de fichier style.scss par style.less ou style.styl).

  1. Copiez le dossier iconsbag/font-and-toolkit/fonts dans votre projet.
  2. Copiez le dossier iconsbag/font-and-toolkit/iconsbag-sass dans votre projet.
  3. Que vous utilisiez SASS, LESS ou STYLUS, vous avez probablement un fichier global (exemple: styles.scss ou global.scss) qui importe les autres fichiers. Vous devez y ajouter l'import du fichier iconsbag-sass/style.scss, comme ceci :
  4. 
        /* Votre fichier SCSS global */
    
        /* ... */
        @import "iconsbag-sass/style.scss";
        
  5. Dans le dossier iconsbag-sass, ouvrez le fichier iconsbag-sass/_fonts.scss et modifiez la variable $font-path pour correspondre à la structure de votre projet.
    Attention: le chemin dans la variable $font-path est relatif au dossier CSS compilé
  6. 
        /* Fichier '_fonts.scss' */
    
        $font-family: "iconsbag" !default;
        $font-path: "fonts" !default;
        /* ... */
        
  7. Allez à la page des icônes et trouvez quelques belles icônes à utiliser

Utilisation simple

Vous devez utiliser la classe CSS ib (raccourci pour Icons in the Bag) puis une seconde classe composée de ib- + le nom de l'icône que vous voulez afficher (exemple: ib-check-circle)

check-circle

     check-circle
    

Dans l'exemple précédent, nous utilisons la balise HTML <i></i> mais vous pouvez utiliser une autre balise, telle que <span></span>

check-circle

     check-circle
    

Vous avez aussi la possibilité d'utiliser une classe CSS optionnelle (voir le chapitre "Les options disponibles" plus bas)

check-circle

     check-circle
    
    

Bien entendu, vous pouvez modifier l'affichage des icônes avec le CSS

check-circle

     check-circle

    

     check-circle
    <style>
    i {
      color: green;
      font-size: 2rem;
      margin: 1rem;
    }
    </style>
    

Pour personnaliser l'alignement vertical des icônes selon vos besoins, vous pouvez utiliser la propriété CSS vertical-align

minus

minus

minus

minus

minus

minus


    // Avec les valeurs prédéfinies de la propriété CSS "vertical-align"
    

minus

minus

minus

minus

// Avec une valeur personnalisée

minus

minus

Si l'icône n'a qu'un but "décoratif", il est préférable d'ajouter l'attribut aria-hidden="true" pour informer les navigateurs compatibles que l'élément ne doit pas être vocalisé (lu par un lecteur d'écran pour aveugle par exemple).

check-circle

     check-circle
    

Si l'icône n'a qu'un but "décoratif" mais que vous souhaitez ajouter un message qui ne sera lu que par une technologie d'assistance (lecteur d'écran pour aveugle par exemple), vous pouvez faire ceci:

check L'achat est validé

     check
    L'achat est validé
    

Les options disponibles

check-circle

check-circle x1

check-circle x2

check-circle x3

check-circle x4

check-circle x5


     check-circle
     check-circle x1
     check-circle x2
     check-circle x3
     check-circle x4
     check-circle x5
    
    

Utiliser les icônes dans une liste

  • Élément 1
  • Élément 2
  • Élément 3
  • Élément 4
  • Élément 5
  • Élément 6
  • Élément 7
  • Élément 8

    
  • Élément 1
  • Élément 2
  • Élément 3
  • Élément 4
  • Élément 5
  • Élément 6
  • Élément 7
  • Élément 8

Transformer les icônes

Standard

ib-h-flip

ib-v-flip

ib-rot45

ib-rot90

ib-rot135

ib-rot180

ib-rot225

ib-rot270

ib-rot315


    

Standard

ib-h-flip

ib-v-flip

ib-rot45

ib-rot90

ib-rot135

ib-rot180

ib-rot225

ib-rot270

ib-rot315

iconsbag - Premium flat icon bundle: complete, customizable & evolutive | Product Hunt Embed