Est-il juste de placer une icône et un texte ensemble? [dupliquer]

1. Quand les icônes devraient-elles inclure une étiquette de texte?
2. Comment aligner le texte et l'icône sur la même ligne?
3. Pourquoi utiliser des icônes au lieu du texte?
4. Comment faire du texte et des icônes sur la même ligne dans le vent arrière?

Quand les icônes devraient-elles inclure une étiquette de texte?

Pour aider à surmonter l'ambiguïté à laquelle presque toutes les icônes sont confrontées, une étiquette de texte doit être présente aux côtés d'une icône pour clarifier sa signification.

Comment aligner le texte et l'icône sur la même ligne?

Si vous souhaitez faire apparaître un texte à l'alignement verticalement à côté d'une icône impressionnante de police, vous pouvez utiliser la propriété CSS Vertical-Align définie sur «Middle» et aussi, spécifiez la propriété Line-Height. Changer la taille de l'icône avec la propriété de taille de police.

Pourquoi utiliser des icônes au lieu du texte?

Les icônes peuvent économiser de l'espace sur le texte, mais au prix de la reconnaissance. Pour les petites icônes, comme 16x16 pixels, il est très difficile pour les utilisateurs de reconnaître même ce qu'ils sont censés être une image, et encore moins ce que l'image est censée représenter. Un utilisateur que je connais pensais que l'icône «disque» pour Save était une image d'un téléviseur.

Comment faire du texte et des icônes sur la même ligne dans le vent arrière?

Enveloppez à la fois le titre et l'icône dans une div avec la classe Flex . De cette façon, ils seront placés sur la même ligne. Vous pouvez également ajouter la justifier pour déplacer l'icône dans le coin droit.