Comment utiliser des Uicons ?

Pour inclure des Uicons à votre projet de site web, vous avez le choix entre trois méthodes : vous pouvez les insérer avec notre CDN, les télécharger et obtenir le pack d’icônes complet dans tous les formats disponibles (SVG, CSS, fichier de police et exemple HTML) ou bien les installer grâce au gestionnaire de paquets npm.

Utiliser des Uicons via un RDC

Un RDC est le moyen le plus rapide d'intégrer des Uicons dans ta page. Tu peux copier-coller le lien dans la section <head> HTML pour télécharger notre CSS ou utiliser @import pour insérer le code dans ton CSS.

Sélectionnez l’icône que vous voulez utiliser et cliquez sur les boutons de copie sous la section « CDN » pour ajouter le code à votre projet.

Utiliser des Uicons via Téléchargement

La fonction Téléchargement te permet de télécharger le pack d'icônes entier avec le SVG individuel pour chaque icône, les feuilles de style CSS, les fichiers font, et un exemple HTML.

Sélectionnez l’icône que vous voulez utiliser et cliquez sur le bouton de téléchargement sous la section « Télécharger » pour obtenir le pack d’icônes complet.

Utiliser des Uicons grâce au gestionnaire de paquets npm

Installez la dernière version d’Uicons, qui contient chaque icône au format SVG, des feuilles de style CSS et des fichiers de police, et mettez facilement votre projet à jour avec les dernières icônes et améliorations grâce au gestionnaire de paquets npm.

npm i @flaticon/flaticon-uicons

Avec cette méthode, vous obtiendrez le même résultat qu’avec le format téléchargeable, mais sous forme d’un pack plus facile à mettre à jour.
Pour des informations plus détaillées, rendez-vous sur la page du répertoire.

Que contient le téléchargement ?

Chaque paquet de style d'UIcons contient les répertoires et fichiers suivants :

Fichiers et dossiers Ce qu'ils sont
/css Feuilles de style pour les polices web
/svg SVG individuel pour chaque icône
/webfont Fichiers de police web utilisés avec la CSS
Utilisation des polices web avec la CSS

Le fichier /css/uicons-[votre-style].css contient le style de base plus tous les styles d'icônes dont vous aurez besoin lorsque vous utiliserez les UIcons. Le dossier /webfonts contient tous les fichiers de polices de caractères auxquels la CSS ci-dessus fait référence et dont il dépend.

Copiez l'intégralité du dossier /webfonts et le fichier /css/uicons-[votre-style].css dans le répertoire des ressources statiques de votre projet (ou à tout autre endroit où vous préférez conserver les ressources utilisateur ou les éléments du fournisseur).

Ajoutez une référence au fichier /css/uicons-[votre-style].css copié dans le répertoire <head> de chaque modèle ou page sur lequel vous souhaitez utiliser les UIcons.

Remplacez uicons-[votre-style].css par le nom du style que vous avez téléchargé.

par ex. : uicons-rounded-outline.css

<head>
  <link href="/your-path-to-uicons/css/uicons-[your-style].css" rel="stylesheet"> <!--load all styles -->
</head>
<body>
  <i class="fi fi-ro-user"></i>
  <i class="fi fi-ro-arrow-right"></i>
  <i class="fi fi-ro-book"></i>
  <i class="fi fi-ro-clean"></i>
</body>

Puisque vous gérez vous-même tous les fichiers téléchargés, assurez-vous que les références dans vos pages <head> sont exactes par rapport à l'endroit où vous avez déplacé tous les fichiers Uicons dans votre projet.

Utilisation de plusieurs styles

Vous voulez utiliser plus d'un style ? Pour ce faire, vous devez télécharger tous les styles que vous souhaitez utiliser dans votre projet.

Uicons vous permet d'utiliser deux styles d'angle différents (arrondi et droit) et trois épaisseurs différentes (standard, gras et solide) pour chacun d'eux.

Ensuite, vous devrez placer tous les fichiers dans les dossiers comme nous l'avons expliqué dans la section précédente, puis ajouter une référence dans la section pour chaque style que vous avez téléchargé.

<head>
  <link href="/your-path-to-uicons/css/uicons-rounded-regular.css" rel="stylesheet">
  <link href="/your-path-to-uicons/css/uicons-rounded-bold.css" rel="stylesheet">
  <link href="/your-path-to-uicons/css/uicons-rounded-solid.css" rel="stylesheet">
</head>

Chaque style utilise un préfixe différent, comme nous pouvons le voir dans le tableau qui suit :

Poids Coin Préfixe Exemple Résultat
Normal Arrondi fi-rr <i class="fi fi-rr-user"></i>
Gras Arrondi fi-br <i class="fi fi-br-user"></i>
Fixe Arrondi fi-sr <i class="fi fi-sr-user"></i>
Normal Droit fi-rs <i class="fi fi-rs-user"></i>
Gras Droit fi-bs <i class="fi fi-bs-user"></i>
Fixe Droit fi-ss <i class="fi fi-ss-user"></i>
Type Préfixe Exemple Résultat
Marques fi-rr <i class="fi fi-brands-instagram"></i>

Nous recommandons de conserver les dossiers /webfonts et /css dans le même répertoire. Si vous ne le faites pas, vous devrez changer le chemin d'accès aux polices web mentionnées dans le fichier CSS de chaque style.

Utilisation des icônes

Les références étant complétées, vous pouvez maintenant commencer à référencer les icônes dans vos modèles ou vos pages.

<body>
  <i class="fi fi-rr-user"></i>
  <i class="fi fi-br-arrow-right"></i>
  <i class="fi fi-sr-book"></i>
  <i class="fi fi-rr-clean"></i>
</body>
Résumé de la licence

Notre Licence vous autorise à utiliser le contenu :

  • Pour les projets  projets personnels et commerciaux
  • Sur support numérique ou  média imprimé
  • Pour un  nombre illimité de fois  et indéfiniment
  • N'importe où  dans le monde
  • Pour effectuer des  modifications  et des travaux connexes

Ce texte est un résumé à titre d'information uniquement. Il ne constitue pas une obligation contractuelle. Pour plus d'informations, veuillez lire nos conditions d'utilisation avant d'utiliser le contenu

Comment attribuer

La création d'icônes de qualité demande beaucoup de temps et d'efforts. Nous vous demandons seulement d'ajouter un petit lien permettant de mentionner le graphiste. Choisissez le support dans lequel vous allez utiliser la ressource.

Copiez ce lien et collez-le là où il est visible, à proximité de l'endroit où vous utilisez la lettre d'information, ou dans la section des crédits.

Uicons by <a href="https://www.flaticon.com/uicons">Flaticon</a>

Si vous avez d'autres questions, veuillez consulter la section FAQ

bold regular solid rounded straight

Quelle est la probabilité que vous recommandiez Flaticon à un ami ?

0 1 2 3 4 5 6 7 8 9 10
Peu probable Très probable