Template 1.X Ajouter des icônes fa dans la sidebar

Nous vous conseillons de vérifier au préalable le contenu que vous téléchargez.
Si un lien de téléchargement ne fonctionne plus, merci de signaler le topic en question !

laurent68

Développeur
Développeur
Membre Certifié
Messages
92
J'aime
59
Points
1 353
Hors ligne
#1
Bonjour, dans ce tuto je vais vous montrez comment mettre des icônes fontawesome dans votre sidebar
Dans votre temppate extra.css ajouter :​
Statistique du forum :



Code:
.sidebar #boardStats h3:before {
font-family: "FontAwesome";
   content: "\f080";
   padding-right: 5px
}
============================================================================

Membre en ligne :



Code:
.sidebar .section.membersOnline h3:before {
font-family: "FontAwesome";
   content: "\f0c0";
   padding-right: 5px
}
============================================================================

Membre de l'equipe en ligne :



Code:
.sidebar .staffOnline h3:before {
font-family: "FontAwesome";
   content: "\F234";
   padding-right: 5px
}
============================================================================

Nouveaux messages de profil



Code:
.sidebar .profilePostList h3:before {
font-family: "FontAwesome";
   content: "\f130";
   padding-right: 5px
}
============================================================================

Profils des membres les plus consultés :



Code:
.sidebar .userList h3:before {
font-family: "FontAwesome";
   content: "\f002";
   padding-right: 5px
}
============================================================================

Donation :



Code:
.sidebar .DonationGoal h3:before {
font-family: "FontAwesome";
   content: "\f1ed";
   padding-right: 5px
}
Ou :

Code:
.sidebar .donationSidebar h3:before {
font-family: "FontAwesome";
   content: "\f1ed";
   padding-right: 5px
}
============================================================================

Nouveaux messages :



Code:
.threadList .secondaryContent h3:before {
	font-family: "FontAwesome";
	content: "\f0e6 ";
	padding-right: 5px;
}
============================================================================

Resources :



Code:
.resources .secondaryContent h3:before {
	font-family: "FontAwesome";
	content: "\f085";
	padding-right: 5px;
}
ou :

Code:
.miniResourceList  .secondaryContent h3:before {
	font-family: "FontAwesome";
	content: "\f085";
	padding-right: 5px;
}
============================================================================

Top Donations :

Code:
.topDonations .secondaryContent h3:before {
	font-family: "FontAwesome";
	content: "\F087";
	padding-right: 5px;
}
============================================================================

Partager cette page



Code:
.sidebar .sharePage h3:before {
font-family: "FontAwesome";
   content: "\f1e0";
   padding-right: 5px
}
============================================================================
Membres en ligne :



Code:
.sidebar .membersOnligne h3:before {
	font-family: "FontAwesome";
	content: "\f0c0 ";
	padding-right: 5px;
}
============================================================================

Trouver un membre :



Code:
.sidebar .findMember h3:before {
font-family: "FontAwesome";
   content: "\f002";
   padding-right: 5px
}
============================================================================

Dernier membre (Membres récemment inscrits) :



Code:
.sidebar .newestMembers h3:before {
font-family: "FontAwesome";
   content: "\F007";
   padding-right: 5px
}
Ou :

Code:
.sidebar .avatarList h3:before {
font-family: "FontAwesome";
   content: "\F007";
   padding-right: 5px
}
============================================================================
Top poster :

Allez dan votre template ls_pom_leaderboard et chercher:

Code:
<h3>{xen:phrase ls_top_poster_leaderboard}</h3>
Remplacer par :

Code:
<h3><i class="fa fa-thumbs-up fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase ls_top_poster_leaderboard}</h3>
============================================================================

Gagnant du mois précédent :

Allez dan votre template ls_pom_winner et remplacer :

Code:
<h3>{xen:phrase ls_top_poster_previousMonthWinner}</h3>
Remplacer par :

Code:
<h3><i class="fa fa-trophy fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase ls_top_poster_previousMonthWinner}</h3>
Ps : Si vous avez d'autre code merci de les partager
 
Dernière édition:

laurent68

Développeur
Développeur
Membre Certifié
Messages
92
J'aime
59
Points
1 353
Hors ligne
#4
Merci pour ces explications. :)
Chez toi je pense que ces code devais fonctionner, pour les Frais d'Hébergement et les ressources :

Code:
.sidebar ..donationCampaign h3:before {
font-family: "FontAwesome";
   content: "\f1ed";
   padding-right: 5px
}
Code:
.miniResourceList  .secondaryContent h3:before {
	font-family: "FontAwesome";
	content: "\f085";
	padding-right: 5px;
}
 

VanillaNeko

WebMaster
XenTrad
Administrateur
Messages
386
Ressources
9
J'aime
203
Points
1 783
Hors ligne
#5
Chez toi je pense que ces code devais fonctionner, pour les Frais d'Hébergement et les ressources :

Code:
.sidebar ..donationCampaign h3:before {
font-family: "FontAwesome";
   content: "\f1ed";
   padding-right: 5px
}
Code:
.miniResourceList  .secondaryContent h3:before {
	font-family: "FontAwesome";
	content: "\f085";
	padding-right: 5px;
}
Je regarderais ça, encore merci à toi pour tes tutoriaux. ;)
 

VanillaNeko

WebMaster
XenTrad
Administrateur
Messages
386
Ressources
9
J'aime
203
Points
1 783
Hors ligne
#7
Chez toi je pense que ces code devais fonctionner, pour les Frais d'Hébergement et les ressources :

Code:
.sidebar ..donationCampaign h3:before {
font-family: "FontAwesome";
   content: "\f1ed";
   padding-right: 5px
}
Code:
.miniResourceList  .secondaryContent h3:before {
	font-family: "FontAwesome";
	content: "\f085";
	padding-right: 5px;
}
Modification effectuer, encore merci @laurent68 . :)

Par contre pour le bloc donations, j'ai du modifier moi même car tes deux codes ne fonctionner pas pour mon cas. ;)
 
Haut Bas