Icônes Web - Introduction

Une icône est un symbole utilisé pour représenter une action ou une capacité spécifique sur une page Web. Les icônes sont utilisées dans les documents ainsi que dans les applications et peuvent être sélectionnables ou non. Par exemple, les images que nous voyons sur les boutons d'une application sont toutes des icônes et ces boutons sont sélectionnables. De même, lorsque nous utilisons une icône comme logo d'entreprise, elle n'est normalement pas sélectionnable.

Dans l'environnement Windows, si nous coupons le volume du système, il sera représenté à l'aide d'une icône, comme indiqué ci-dessous.

En utilisant les icônes Web, nous pouvons représenter une page de chargement, une option désactivée, un lien, une redirection, etc. Ces icônes peuvent être retournées, pivotées, redimensionnées, encadrées, inversées et colorées.

Polices d'icônes

Les polices d'icônes contiennent des symboles et des glyphes. Une fois que vous avez chargé une police souhaitée, vous pouvez utiliser l'une des icônes fournies par cette police en utilisant le nom de classe de l'icône. Nous pouvons également appliquer différentes couleurs aux icônes et les redimensionner à l'aide des propriétés CSS. Il existe plusieurs bibliothèques d'icônes (polices) qui fournissent des icônes. Ce tutoriel se concentre sur trois polices principales, à savoir -

• Police géniale
• Glyphicons Bootstrap
• Icônes matérielles de Google

Police géniale

Cette police fournit 519 icônes vectorielles évolutives gratuites. Cette bibliothèque est entièrement gratuite, à la fois pour un usage personnel et commercial. Ces icônes peuvent être personnalisées facilement. À l'origine, ils ont été développés pour Bootstrap.

Glyphicons Bootstrap

Il s'agit d'une bibliothèque d'icônes monochromatiques disponibles dans des formats d'image raster, des formats d'image vectorielle et sous forme de polices. Il fournit plus de 250 glyphes au format de police. Vous pouvez utiliser ces polices dans vos projets Web. Ces icônes ne sont pas gratuites, mais vous pouvez les utiliser dans des projets basés sur Bootstrap sans avoir à les acheter.

Icônes matérielles de Google

Google propose environ 750 icônes conçues dans le cadre des "Consignes relatives à la conception des matériaux", appelées Material DesignIcônes. Ces icônes sont simples et prennent en charge tous les navigateurs Web modernes. Étant donné que ces icônes sont vectorielles, elles sont également évolutives. Pour utiliser ces icônes, nous devons charger la police (bibliothèque)material-icons.