Font awesone : superposer des icônes

[demeter1]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Opera
Personnes concernées par le problème : Moi uniquement
Lien du forum : http://altitudetropicale.forums-actifs.com/index.forum

Description du problème

Bonjour à tous,
histoire de baisser le temps de chargement du forum, je commence à supprimer une bonne partie des images par des icônes de font awesone.

Une intégration d'un seul élément ne me pose pas de soucis mais pour une superposition de deux images, c'est une autre affaire

J'ai fait des essais sur a.last-post-icon  avec ce css

Code:

a.last-post-icon {
content: "\f075";  font-family: FontAwesome!important;  padding-right: 3px;color:#c1da55;
}

a.last-post-icon::before {
content: "\f0e6";  font-family: FontAwesome!important; color:#d0944c;z-index:-1!important;
}


hélas, je n'ai que le a.last-post-icon::before qui s'affiche malgré le z-index.

Vous auriez une idée pour résoudre ce soucis ?

Merci par avance pour votre aide.

[Invité]

Hello Stéphane ,

tu as un : de trop :
Ceci fonctionnera:

Code:


a.last-post-icon:before {
content: "\f0e6";  font-family: FontAwesome!important; color:#d0944c;z-index:-1!important;
}


a++

[demeter1]

Bonjour Philippe,
j'ai refait un essai mais hélas, le before prend le dessus sur le a.last-post-icon.

Avec un : ou deux, l'affichage est identique.

[Invité]

Re Stéphane,
Teste ceci alors:

Code:

    a.last-post-icon:before {
    content: "\f075";  font-family: FontAwesome!important;  padding-right: 3px;color:#c1da55;
    }
   
    a.last-post-icon:after {
    content: "\f0e6";  font-family: FontAwesome!important; color:#d0944c;z-index:-1!important;
    }

Il faudra peut être ajouter une position absolute Stéphane .

a++

[demeter1]

Bonjour Philippe,
ça fonctionne à merveille avec quelques modifs

Code:

  a.last-post-icon:before {
    content: "\f075";  font-family: FontAwesome!important;  padding-right: 3px;color:#c1da55;z-index:1!important;font-size:13px;position:relative!important;
    }
 
    a.last-post-icon:after {
    content: "\f0e6";  font-family: FontAwesome!important; color:#d0944c;z-index:-2!important;margin-left:-13px!important;font-size:13px;
    }

et une image en moins à charger

Un grand merci pour ton aide.