Foire aux questions sur le pack d'icônes

Votre question n'est pas dans la liste ?

Si votre question n’apparaît pas dans la FAQ, que vous ne trouvez pas de réponse sur cette page ainsi que dans la documentation ou que vous avez trouvé une erreur sur notre site, vous pouvez nous joindre via notre page de contact.

Si la question et la réponse sont pertinentes, elles seront ajoutées dans cette page.

Vous avez une question relative à l'achat, le paiement, le remboursement, le téléchargement et autres actions liées à l'aspect e-commerce du pack ?

Pour toutes les questions de ce type, nous vous invitons à consulter directement l'aide du service externe dédié à cette partie : aide de Gumroad.

Que sont les formats matriciel et vectoriel ?

Sur le web, une image peut être sous deux formats: matriciel (png, jpg, gif, ...) et vectoriel (svg, pdf, ...).

Une image matricielle (aussi appelée bitmap) est composée d'une multitude de carrés appelés "Pixels".
Malheureusement, lors de son agrandissement les Pixels grossissent et donne un aspect flou à l'image qui perd donc de la netteté.

Une image vectorielle est composée d'un ensemble de vecteurs (points et segments liés entre eux par des formules mathématiques).
Peu importe la taille de l'image, les vecteurs conservent leurs proportions et donc la qualité de l'image ne diminue pas.

Toutes les icônes du pack sont fournies aux deux formats: le svg d'origine et les png (en 4 tailles et 3 couleurs).

Comment intégrer la font/police dans votre projet ?

Pour toutes les informations relatives à l'utilisation du pack dans vos projets, voir la page de documentation dédiée: documentation.

Quelle est la licence d'utilisation du pack d'icônes ?

Deux licences: la "Standard License" (licence standard) et la "Extended license" (licence étendue).

Elles sont permissives et permettent une grande liberté pour tout vos projets.

Les différences entre les deux sont: le nombre maximum d'utilisateurs autorisés et les autorisations d'utiliser les icônes dans des Marchandises à vendre et Produits numériques distribués en masse.
Plus d'information: page de licence standard et page de licence étendue.

Comment modifier les icônes SVG ?

Le format de fichier SVG (Scalable Vector Graphics) est un format de dessin vectoriel (voir ci-dessus pour la différence entre format vectoriel et matriciel) basé sur le langage XML et permet la création d’images sous forme de graphiques vectoriels.

Comme pour tous les fichiers SVG, vous pouvez:
  • Modifier directement le XML en ouvrant le fichier avec un éditeur de texte classique
  • Modifier le graphique vectoriel en ouvrant le fichier avec un éditeur vectoriel tel que Inkscape (logiciel libre)

Pourquoi ICONSBAG utilise Icomoon ?

Pour faciliter l'utilisation des icônes du pack ICONSBAG dans vos divers projets, ASYMOV à choisi d'utiliser l'application Icomoon pour générer les différents éléments et fichiers nécessaires :

  • Les fichiers de font/police d'icônes
  • Les fichiers de styles (CSS, SASS, LESS, STYLUS)

Comment personnaliser la font/police d'icônes ?

Si vous souhaitez personnaliser le contenu des fichiers de font/police (par exemple, intégrer seulement les icônes dont vous avez besoin), vous pouvez créer votre contenu adapté en utilisant directement l'application Icomoon.

Vous trouverez plus d'informations sur l'utilisation de l'application Icommon sur la Documentation Icomoon et la FAQ Icomoon.

Pour composer votre font/police d'icônes personnalisée, le pack ICONSBAG contient le dossier iconsbag/icons-for-font. Ce dossier contient toutes les icônes préparées à être utilisées dans une font/police.

Pourquoi "préparées" ? Voir la réponse suivante.

Pourquoi un fichier svg préparé pour être utilisé comme font ?

Le dossier iconsbag/icons-for-font contient toutes icônes préparées à être utilisées dans une font/police.

Comme noté dans la documentation de Icomoon, toutes les icônes importées ne doivent pas être composées de "contours" (car ils seront ignorés lors de la génération des fichiers de font/police) mais uniquement de "remplissages".
Comme c'est un travail relativement long et fastidieux à effectuer sur toutes les icônes.... ASYMOV l'a fait pour vous, pour toutes les icônes et les met à votre disposition dans le dossier icons-for-font du pack ICONSBAG.

Qu'est-ce qu'une font/police d'icônes ?

Une font/police d'icônes est une police d'écriture dont les glyphes sont des icônes au lieu de lettres.

Qu'est-ce qu'un toolkit CSS ?

Le toolkit CSS (ou boite à outils CSS) du pack est un ensemble de fichiers permettant une utilisation simple de la font/police d'icône dans votre projet.

Concrètement, il s'agit de tous les fichiers de style (CSS, SASS, LESS, STYLUS) présent dans le dossier iconsbag/font-and-toolkit.

Pourquoi les icônes ne sont pas aux formats PSD, CSH et AI ?

ASYMOV utilise quasi uniquement des outils libres/open source (FLOSS) pour réaliser ses projets et produits.

En ce qui concerne la création des icônes, ASYMOV utilise exclusivement le logiciel libre Inkscape

  • Le format de fichier PSD (PhotoShop Document) est un format propriétaire (non libre) développé par Adobe.
  • Le format de fichier CSH (Photoshop Custom Shapes File) est un format propriétaire (non libre) développé par Adobe.
  • Le format de fichier AI (Adobe Illustrator) est un format propriétaire (non libre) développé par Adobe.

C'est pourquoi ces formats de fichiers ne sont pas dans le pack d'ICONSBAG.

Pourquoi le dossier de la font/police ne contient pas le fichier WOFF 2.0 ?

Comme noté dans la FAQ de Icomoon, l'application d'Icomoon ne génère le fichier au format WOFF 2.0 par défaut.

Si vous avez un compte premium Icomoon, suivez les instructions de la question "Comment personnaliser la font/police d'icônes ?" pour créer une font/police d'icônes personnalisée.

Comment intégrer les icônes SVG directement dans le HTML ?

Nous vous invitons à consulter l'article très complet de Mozilla sur le sujet:
Ajouter des images vectorielles à une page web (Mozilla).

Pourquoi il n'y a pas d'autres couleurs et tailles pour les images ?

Comme il existe une infinité de couleurs et tailles d'image, il serait impossible de mettre toutes les variations de fichier dans le pack d'icônes.

C'est pourquoi le pack contient seulement les couleurs (blanc, gris, noir) et les tailles (32px, 64px, 128px, 256px) standards.

Comment générer les images dans une autre couleur et/ou une autre taille ?

Vous pouvez modifier librement la forme et la couleur du fichier source .SVG de chaque icône.
Une fois modifiée, vous pouvez générer une nouvelle image .PNG dans une taille personnalisée.

Pour faire cela, suivez les étapes suivantes :

  1. Télécharger et installer un logiciel de retouche d'image vectorielle, ex: Inkscape (gratuit).
  2. Ouvrir l'image source .SVG correspondant à l'icône que vous souhaitez modifier.
  3. Sélectionner tous les éléments avec Ctrl+A (ou dans le menu avec Édition>Sélectionnez tout).
  4. Changer la couleur des contours avec Maj+Clic (sur la nouvelle couleur que vous avez choisi dans la liste des couleurs en bas de la fenêtre).

Si vous avez besoin de mettre différentes couleurs sur différents éléments :

  1. Sélectionner tous les éléments avec Ctrl+A (ou dans le menu avec Édition>Sélectionnez tout).
  2. Dégrouper tous les éléments sélectionnés avec Maj+Ctrl+G (ou dans le menu avec Objet>Dégrouper). L'opération est à répéter si il y a plusieurs groupes d'éléments.
  3. Cliquer sur l'élément à modifier
  4. Changer la couleur des contours avec Maj+Clic (sur la nouvelle couleur que vous avez choisi dans la liste des couleurs en bas de la fenêtre).

Exporter le fichier au format .PNG :

  1. Ouvrir le menu d'export avec Maj+Ctrl+E (ou dans le menu avec Fichier>Exporter au format PNG...).
  2. Dans le menu Exporter au format PNG, sélectionner la Zone à exporter -> Page, renseigner la Taille de l'image voulue, cliquer sur Exporter sous... pour choisir le nom du futur fichier et son emplacement.
  3. Enfin, cliquer sur Exporter.
iconsbag - Premium flat icon bundle: complete, customizable & evolutive | Product Hunt Embed