Résolu Problème avec les icones fa

Statut
N'est pas ouverte pour d'autres réponses.
The Winners TM

The Winners TM

Membre
Inscription
1 Octobre 2017
Messages
123
Réactions
4
Points
139
RGCoins
25
Bonjour j'ai suivi un tuto ( je peux pas donner le lien ) et j'ai ca
You must be registered for see images attach


je suis sous XF 1.5.15
 
Trier par date Trier par votes
Flown iT a dit:


1434466559-1434283967-sans-titre-3.png


Activer les FontAwesomes sur votre forum

Avant de pouvoir utiliser les FontAwesomes, il va falloir les activer sur votre forum, pour être plus précis c'est la libraire des icônes que l'on va mettre sur le forum.
@Kévin SEC partait du principe que vous téléchargiez le fichier CSS à mettre dans votre FTP, donc forcément le lien d'accès sera différent et cela peut poser problèmes aux novices ( vilain kévin ), je vais utilisé le lien de la libraire cloudfare pour ma part.

Allez dans votre panel d'administration puis rendez-vous dans les templates et cherchez PAGE_CONTAINER.
Ajoutez ce lien dans l'en-tête ( balises <head> )

HTML: 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Une fois ceci fait, enregistrez la modification.

Voilà, vos FontAwesomes sont utilisables !

1434466559-1434283967-sans-titre-3.png




​
Cliquez pour agrandir...
Tu peux me donner un screen de ca stp
 
Voter positivement 0 Voter négativement
Rien a faire :triste: j'abandonne et pour cette partie
Flown iT a dit:


1434466559-1434283967-sans-titre-3.png


Mettre un FontAwesome dans les bannières d'utilisateurs

Lorsque vous créez un groupe d'utilisateurs ( grade ) il vous ait demander "Texte de la bannière utilisateur" avec différentes couleurs de bannières à votre disposition.

dda72eacd77f4f4cbd08bc886956a1ef.png


Ici, mon grade est Super-Développeur j'ai donc appelé ma class CSS "userBanner bannerSupDev"
Ok t'es gentil mais pour la suite, le CSS ne se met pas comme ça ?
Non, il faut aller dans les templates, dans le template user_banners.css plus précisément.

Vous voyez déjà les class CSS des bannières par défaut.
( Petit bonus, cette partie vous montre comment mettre des couleurs différentes que celles proposées, c'est cadeau )
Donc pour ma bannière je veux une couleur de texte blanche, un FA ( ) en blanc également.
Un background de cette couleur.

Pour la modification sans le FA je vais y placer ce code :

Code: 
.bannerSupDev {[/FONT][/COLOR][/CENTER][/FONT][/COLOR][/CENTER]
[COLOR=rgb(64, 64, 64)][FONT=MyriadPro-Light][CENTER][COLOR=#404040][FONT=MyriadPro Light]
[CENTER]
color: white !important;
    background-color: #A70000 !important;
}
​






Explications : .bannerSupDev, c'est le nom de la class CSS que j'ai utilisé tout à l'heure

Ensuite je vais rajouter mon FA de couleur blanche

HTML: 
.bannerSupDev:before {[/FONT][/COLOR][/CENTER][/FONT][/COLOR][/CENTER]
[COLOR=rgb(64, 64, 64)][FONT=MyriadPro-Light][CENTER][COLOR=#404040][FONT=MyriadPro Light]
[CENTER]
content: "\f120";
        font-family: FontAwesome;
        padding-right: 4px;
        color: white;
}
​




Explications :
:before me sert à indiquer que le FA doit être placé avant le texte ( comme tout à l'heure )
font-family : toujours la même famille de police, FontAwesome
Vous pouvez tout à fait donner des animations, cela fonctionnera parfaitement.

Maintenant à vous de définir vos propres icônes, couleurs, class CSS etc ...

1434466559-1434283967-sans-titre-3.png

​
Cliquez pour agrandir...
​
J'ai mis ce code
HTML: 
.userBanner.bannerFondator     { color: black; background-color: silver  : ; border-color: #3DC491; }
.userBanner.bannerFondator.wrapped span { background-color: #3DC491  ; }
.userBanner.bannerFondator   {[/FONT][/COLOR][/CENTER]
[COLOR=#404040][FONT=MyriadPro Light]
[CENTER]
content: "\f120";
        font-family: FontAwesome;
        padding-right: 4px;
        color: white;
}

et j'ai ca
You must be registered for see images attach
je sais que j'ai fait une patate quelque part mais ou ?
 
Voter positivement 0 Voter négativement
The Winners TM a dit:
Rien a faire :triste: j'abandonne et pour cette partie
​
J'ai mis ce code
HTML: 
.userBanner.bannerFondator     { color: black; background-color: silver  : ; border-color: #3DC491; }
.userBanner.bannerFondator.wrapped span { background-color: #3DC491  ; }
.userBanner.bannerFondator   {[/FONT][/COLOR][/CENTER]
[COLOR=#404040][FONT=MyriadPro Light]
[CENTER]
content: "\f120";
        font-family: FontAwesome;
        padding-right: 4px;
        color: white;
}

et j'ai ca
You must be registered for see images attach
je sais que j'ai fait une patate quelque part mais ou ?
Cliquez pour agrandir...
Du BBCode s'est rajouté je pensais que tu aurais fait attention à ce que tu copies tu dois enlever toutes les balises
 
Cette réponse a aidé l'auteur de cette discussion !
Voter positivement 0 Voter négativement
Statut
N'est pas ouverte pour d'autres réponses.
Retour
Haut