Comment l'utiliser ?

Sélectionnez le poids et l'angle

Télécharger

Le téléchargement comprend les icônes au format SVG, les fichiers de polices, la feuille de style CSS requise pour utiliser la police d'icône, ainsi qu'un exemple de code HTML

S'inscrire et télécharger
RDC

Intégrez le fichier CSS à la section <head> de votre site web ou via une @importation dans votre feuille de style CSS.

Inscrivez-vous et obtenez-le
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
Regular Rounded fi-rr <i class="fi fi-rr-user"></i>
Bold Rounded fi-br <i class="fi fi-br-user"></i>
Solid Rounded fi-sr <i class="fi fi-sr-user"></i>
Regular Straight fi-rs <i class="fi fi-rs-user"></i>
Bold Straight fi-bs <i class="fi fi-bs-user"></i>
Solid Straight fi-ss <i class="fi fi-ss-user"></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