Démarrer
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
Latest version: 2.6.0
Un RDC est le moyen le plus rapide d'intégrer des UIcons dans votre page. Vous pouvez copier-coller le lien dans la section <head> HTML pour télécharger notre CSS ou utiliser @import pour insérer le code dans votre 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 vous 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 web fonts |
| /svg | SVG individuel pour chaque icône |
| /webfont | Fichiers de web fonts utilisés avec la CSS |
Utilisation des web fonts 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-square-right"></i>
<i class="fi fi-ro-arrow-right"></i>
<i class="fi fi-ro-book"></i>
<i class="fi fi-ro-broom"></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-square-right"></i> |
|
| Gras | Arrondi | fi-br | <i class="fi fi-br-square-right"></i> |
|
| Fixe | Arrondi | fi-sr | <i class="fi fi-sr-square-right"></i> |
|
| Fin | Arrondi | fi-tr | <i class="fi fi-tr-square-right"></i> |
|
| Normal | Droit | fi-rs | <i class="fi fi-rs-square-right"></i> |
|
| Gras | Droit | fi-bs | <i class="fi fi-bs-square-right"></i> |
|
| Fixe | Droit | fi-ss | <i class="fi fi-ss-square-right"></i> |
|
| Fin | Droit | fi-ts | <i class="fi fi-ts-square-right"></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 web fonts 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-square-right"></i>
<i class="fi fi-br-arrow-right"></i>
<i class="fi fi-sr-book"></i>
<i class="fi fi-rr-broom"></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
- Anywhere in the world
- To make modifications and derived works
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 attribuer au graphiste. Choisissez le support dans lequel vous allez utiliser la ressource.
Copiez ce lien et collez-le partout où il est visible, à proximité de l'endroit où vous utilisez l'image. Si ce n'est pas possible, placez-le dans le pied de page de votre site Web, de votre blog ou de votre newsletter, ou dans la section d’attribution.
Si vous avez d'autres questions, veuillez consulter la section FAQ