Maison > Article > interface Web > Définir la taille des icônes en HTML

Définir la taille des icônes en HTML

王林avant: 2023-09-03 11:29:061733parcourir

Dans cet article, nous verrons comment définir la taille des icônes en HTML.

Les

Les icônes sont des symboles qui représentent des actions spécifiques sur une page Web. Icon Font contient des symboles et des glyphes. Il existe plusieurs bibliothèques d'icônes (polices) qui fournissent des icônes et peuvent être utilisées sur les pages Web HTML.

Les principales polices d'icônes souvent utilisées par les développeurs Web sont Font Awesome, Bootstrap Glyphicons et Google's Material Icons我>.

Font Awesome - Cette bibliothèque est entièrement gratuite pour un usage commercial et personnel. Cette police nous offre 519 icônes vectorielles évolutives gratuites. Ceux-ci peuvent être facilement personnalisés et ont été initialement développés avec Bootstrap.
Bootstrap Glyphicons - Il s'agit d'une bibliothèque d'icônes monochromes disponible pour les formats d'images raster, les formats d'images vectorielles et les polices. Il fournit plus de 250 glyphes dans des formats de police. Vous pouvez utiliser ces polices dans des projets Web, mais elles ne sont pas gratuites.
Icônes matérielles de Google - Google a conçu 750 icônes selon les « Directives de conception matérielle » fournies sous forme d'ensemble, ces icônes sont appelées Icônes de conception matérielle. Presque tous les navigateurs Web prennent en charge ces icônes. Pour utiliser ces icônes, vous devez charger l'icône matérielle de la police (bibliothèque).

Utilisons la bibliothèque de polices d'icônes ci-dessus dans l'exemple ci-dessous.

Icônes géniales de police

Exemple

Dans l'exemple ci-dessous,

Tout d'abord, nous avons chargé la bibliothèque Font Awesome.
Ensuite, nous utilisons l'une des icônes et ajoutons le nom de cette classe d'icônes à l'élément HTML à l'intérieur de la balise
.
Nous augmentons ensuite la taille de l'icône en la définissant en CSS et en l'utilisant avec le nom de la classe.
Nous avons déclaré la taille à 100px.

<html>
<head>
   <title>Set the size of the icons in HTML</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
   <style>
      i.size {
         font-size: 100px;
      }
   </style>
</head>
<body>
   <h2>This is a Font Awesome Icon</h2>
   <p>We have set the size of this icon to 100px.</p>
   <i class="fa fa-inr size"></i>
</body>
</html>

Comme nous pouvons le voir dans le résultat, nous avons utilisé l'icône de la monnaie indienne et défini sa taille en utilisant CSS.

Icône matérielle Google

Exemple

Dans l'exemple ci-dessous,

Nous avons chargé la bibliothèque d'icônes de matériaux.
Ensuite, nous utilisons l'une des icônes et ajoutons le nom de cette classe d'icônes à l'élément HTML à l'intérieur de la balise
.
Nous avons utilisé l'icône nommée trafic car elle appartient à la catégorie Actions.
Nous augmentons ensuite la taille de l'icône en la définissant en CSS et en l'utilisant avec le nom de la classe.

<!DOCTYPE html>
<html>
<head>
   <title>Set the size of the icons in HTML</title>
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <style>
      i.size {
         font-size: 150px;
      }
   </style>
</head>
<body>
   <h2>This is a Google Material Icon</h2>
   <p>We have set the size of this icon to 150px.</p>
   <i class="material-icons size">traffic</i>
</body>
</html>

Comme nous pouvons le voir dans le résultat, nous avons utilisé une icône de feu de circulation et défini sa taille en utilisant CSS.

Guide Glyphe

Exemple

Dans l'exemple ci-dessous,

Tout d’abord, nous chargeons la bibliothèque Bootstrap Glyphicons.
Ensuite, nous utilisons l'une des icônes et ajoutons le nom de cette classe d'icônes à l'élément HTML à l'intérieur de la balise
.
Dans l'exemple, nous utilisons une icône nommée tree avec le nom de classe tree-decidious.

<!DOCTYPE html>
<html>
<head>
   <title>Set the size of the icons in HTML</title>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
   <style>
      i.mysize {
         font-size: 100px;
      }
   </style>
</head>
<body>
   <h2>This is a Bootstrap Glyphicons Icon</h2>
   <p>We have set the size of this icon to 100px.</p>
   <i class="glyphicon glyphicon-tree-deciduous mysize"></i>
</body>
</html>

Comme nous pouvons le voir dans le résultat, nous avons utilisé l'icône de l'arbre et défini sa taille en utilisant CSS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent："Le canevas HTML5 ctx.fillText ne peut pas réaliser le retour à la ligne"Article suivant："Le canevas HTML5 ctx.fillText ne peut pas réaliser le retour à la ligne"

Articles Liés

Voir plus