1 résultat trouvé pour pi1

Icônes FA et indication de nouveaux messages

Bonjour Milouze14 et merci ! Mais je ne crois pas que cette façon de faire va me permettre d'obtenir ce que je souhaitais au départ. En effet, comme indiqué dans mon tout premier message, il s’agissait en premier lieu de donner un id à chaque icône FA de mes forums (je souhaitais en effet que chaque forum présente un icône FA diffèrent. Ces icônes « changeraient d’apparence » de manière identique (genre, en se secouant par exemple, via la keyframes dont j’ai parlé plus haut) pour indiquer les nouveaux messages). Du coup, avec les codes ci-dessus, je ne crois pas que cela prenne en compte les id qui ont été attribués à chaque icône FA des catégories ? Je ne sais pas si mes explications sont claires, désolée si ça ne l’est pas :/

Edit : J'ai eu une petite idée mais je ne suis pas sûre de mon coup

Comme j'ai ceci en CSS de base :

Code:: .cat-icon { background: #e0e0e0; border-radius: 5px; display: flex; margin-left: 380px; margin-top: -50px; position: absolute; width: 40px; } #pi:before{ color: #353738; content: '\f106'; font-family: 'Font Awesome\ 5 Free'; font-size: 25px; font-weight: 900; margin: auto; } #pi2:before{ color: #353738; content: '\f187'; font-family: 'Font Awesome\ 5 Free'; font-size: 25px; font-weight: 900; margin: auto; } #pi3:before{ color: #353738; content: '\f069'; font-family: 'Font Awesome\ 5 Free'; font-size: 25px; font-weight: 900; margin: auto; } #pi4:before{ color: #353738; content: '\f0e7'; font-family: 'Font Awesome\ 5 Free'; font-size: 25px; font-weight: 900; margin: auto; }

.cat-icon : en gros, l'emplacement des icônes de catégories et leur background.
#pi1, 2, 3, 4 : les icônes FA de chaque catégorie intégrés au .cat-icon en :before.

Je me dis qu'en fait, vu que j'aimerais que le .cat-icon soit impacté pour annoncer les nouveaux messages, c'est bien une nouvelle class qu'il faut ajouter, class qui contiendrait ceci afin d'animer .cat-icon :

Code:: -webkit-animation-name: spaceboots; -webkit-animation-duration: 0.8s; -webkit-transform-origin:50% 50%; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear;

Est-ce que par hasard, un truc du genre pourrait fonctionner au niveau du JS ?

Code:: $(function(){ $("div.cat-icon").each(function() { var texte = $(this).text(); if (texte.indexOf("_unread") > -1) { $(this).find(".cat-icon").addClass('nouveau'); }; }); });

Code:: .cat-icon .nouveau { -webkit-animation-name: spaceboots; -webkit-animation-duration: 0.8s; -webkit-transform-origin:50% 50%; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; }

En tout cas j'ai essayé ça mais ça n'a pas marché ^^