28172 sujets

CSS et mise en forme, CSS3

Bonjour,
Pour ceux qui utilisent Fontawesome, est-il possible de repeter plusieurs fois la même icone en parametrant l'information dans le code de l'icone ?
Exemple, je veux repeter 3 fois une étoile, peut-on faire autrement (plus court) que:

<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>

Merci pour vos lumières Smiley biggrin
Modérateur
bonjour MarinaZut,

Excepté avec un langage de programation dynamique, ce n'est pas possible en html pur.

en php:

<?= str_repeat('<i class="fa-solid fa-star"></i>', 3) ?>


en python:

print('<i class="fa-solid fa-star"></i>' * 3)


en JS:

console.log('<i class="fa-solid fa-star"></i>'.repeat(3))


bon anniversaire Smiley party
Modifié par niuxe (02 Mar 2023 - 12:49)
Bonjour,

Peut-être avec une classe css personnalisée ?

<i class="fa-solid fa-star-3"></i>

.fa-star-3::before {
  font-family: "FontAwesome";
  content: "\f005 \f005 \f005";
}


Joyeux anniversaire !
Modérateur
Bonjour,

Si l’icône n'est pas supposée être interactive, un padding + un text-shadow pourrait aussi faire l'affaire:

exemple avec une class maison :
<i class="fa-regular fa-star x-3"></i>

et
i.x-3 {
  padding-right:4ch;
  text-shadow: 2ch 0, 4ch 0;
}


pour jouer avec : https://codepen.io/gc-nomade/pen/KKxWjVx

Cdt
Modifié par gcyrillus (03 Mar 2023 - 08:08)
Modérateur
gcyrillus a écrit :
Si l'icone n'est pas supposé etre interactive
C'est ce que j'ai supposé (j'ai pensé à un système de note). Sinon en effet, la solution de Pitet est une bonne solution
Modifié par niuxe (02 Mar 2023 - 22:45)