Remplacer les boutons de contact du profil par des icons FontAwesome

[diluvienne]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://neverfoundv2.forumactif.com/

Description du problème

Bonjour à toutes et à tous.

Je suis en plein codage sur un forum test pour un futur projet, et j'aimerais créer un bloc dans le profil à l'affichage des messages avec quelques icons qui mèneraient vers la rédaction d'un mp à l'utilisateur, la fiche de présentation du personnage, sa fiche de liens, etc.

J'aimerais donc : modifier l'icon existant du lien vers le mp de l'utilisateur, et ajouter de nouveaux champs/labels sous forme d'icons qui mènent vers les fiches de liens ou présentations des personnages.
Voici un petit schéma du résultat que j'aimerais obtenir (grosso modo) :


J'ai installé FontAwesome dans le template overall_header comme mentionné dans ce tuto. Jusque là, rien de bien compliqué.

J'ai ensuite suivi le tutoriel pourtransformer les labels du profil, en appliquant tout ça aux champs de contact. Et c'est là que ça coince, ayant un niveau très limité voire inexistant en JavaScript.

Je ne comprends pas où coller le code html de l'icon trouvé sur FontAwesome, ni la notion de tag et ce qui doit être modifié ou non. (En somme je comprends pas grand chose.)

Prenons par exemple un icon représentant une petite feuille/un document qui mènerait vers la fiche de présentation du personnage. Le code html de l'icon en question est

Code:

<i class="fa-solid fa-file fa-flip-horizontal"></i>

.
J'ai créé un nouveau champ de contact dans le panneau d'administration appelé "Fiche de présentation". Mais le nom du champ apparaît toujours sous cette forme : Fiche de présentation [lbl-pres] et l'affichage du profil dans les messages ressemble à ça :

Spoiler:

Voici donc le script JS correspondant :

Code:

; (function(){
 
  // On définit les différents tag et par quoi on remplace les label
  var tagLabel = [{
      tag: 'pres',
      html: '<span class="fa-solid fa-file fa-flip-horizontal">&nbsp</span>'
    },
    {
      tag: 'age',
      html: '<span class="fa fa-child">&nbsp</span>'
    },
    {
      tag: 'inscription',
      html: '<span class="fa fa-user-plus">&nbsp</span>'
    }];
 
  // Fonction qui supprime les :
  function remplacerLabel( txtLabel ){
    var nvTxt = txtLabel.replace(/:/i, '');
    // On renvoie le texte sans les :
    return nvTxt;
  }
 
  function labelFontAwesome( txtLabel ){
    var newLabel;
 
    // On parcourt le tableau de tag
    for( var i = 0 ; i < tagLabel.length ; i++){
      // Si on trouve un tag correspondant
      if(txtLabel.indexOf(tagLabel[i].tag) != -1){
        // On récupére le nouveau code html correspondant
        newLabel = tagLabel[i].html;
        // On envoie le nouveau contenu du label
        return newLabel;
      }
    }
  }
 
  // Au chargement de la page
  $(window).ready( function(){
 
    // On parcourt chaque label
    $('.boxPOST .prflPOST .abtPOST .label').each( function(){
      var $label = $(this),
          // On récupére le contenu "texte" du label
          txtLabel = $label.text(),
          txtLabelModif;
 
          // On vérifie si le label contient un tag
          if(txtLabel.indexOf('[lbl-') != -1){
            // Si c'est le cas, on change le html
            txtLabelModif = labelFontAwesome(txtLabel);
            // On remplace le code html du label par le nouveau
            $label.html(txtLabelModif);
          }else{
            // On exécute la fonction pour supprimer les :
            txtLabelModif = remplacerLabel(txtLabel);
            // On remplace le texte du label sans les :
            $label.text(txtLabelModif);
          }
     
    });
 
  });
 
})();

Voici mon template overall_header (si besoin) :

Code:

<!-- BLANK THEME ---->
<!-- VERSION 3.01 - MAJ 26/10/22 ---->
<!-- par Geniuspanda / https://code-lab.tumblr.com/ ---->   
      
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>

<head>
    <!--  INSTALLATION DE NOUVELLE POLICE D'ECRITURE -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap" rel="stylesheet">
     
    <!--  INSTALLATION DE FONT ICON -->
    <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">

     
     <!-- TEXTE DANS L'ONGLET DE NAVIGATEUR -->
   <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
     
   <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}"/>
   <meta http-equiv="content-script-type" content="text/javascript"/>
   <meta http-equiv="content-style-type" content="text/css"/>
   <!-- BEGIN switch_compat_meta -->
   <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}"/>
   <!-- END switch_compat_meta -->
   <!-- BEGIN switch_canonical_url -->
   <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}"/>
   <!-- END switch_canonical_url -->
   {META_FAVICO}
   {META}
   {META_FB_LIKE}
   <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}"/>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        {T_HEAD_STYLESHEET}
   {CSS}
   <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}"/>
   <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}"/>
   <script src="{JQUERY_PATH}" type="text/javascript"></script>
   <!-- BEGIN switch_recent_jquery -->
   <script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
   <script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
   <script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
   <!-- END switch_recent_jquery -->
   <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
   {RICH_SNIPPET_GOOGLE}
     
   <!-- BEGIN switch_ticker -->
   <link type="text/css" rel="stylesheet" href="{JQUERY_DIR}ticker/ticker.css"/>
   <script src="{JQUERY_DIR}ticker/ticker.js" type="text/javascript"></script>
   <!-- END switch_ticker -->

   <!-- BEGIN switch_ticker_new -->
   <script src="{JQUERY_DIR}jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
   <script type="text/javascript">
      //<![CDATA[
      /* Definir le sens de direction en fonction du panneau admin */
      var tickerDirParam = "{switch_ticker.DIRECTION}";
      var slid_vert = false;
      var auto_dir = 'next';
      var h_perso = parseInt({switch_ticker.HEIGHT});

      switch (tickerDirParam) {
         case 'top' :
            slid_vert = true;
            break;

         case 'left':
            break;

         case 'bottom':
            slid_vert = true;
            auto_dir = 'prev';
            break;

         case 'right':
            auto_dir = 'prev';
            break;

         default:
            slid_vert = true;
      }

      $(document).ready(function () {

         $('#fa_ticker_content').css('display', 'block');

         var width_max = $('ul#fa_ticker_content').width();
         var width_item = Math.floor(width_max / {switch_ticker.SIZE});

         if (width_max > 0) {
            $('ul#fa_ticker_content li').css('float', 'left').css('list-style', 'none').width(width_item).find('img').each(function () {
               if ($(this).width() > width_item) {
                  var ratio = $(this).width() / width_item;
                  var new_height = Math.round($(this).height() / ratio);
                  $(this).height(new_height).width(width_item);
               }
            });

            if (slid_vert) {
               var height_max = h_perso;

               $('ul#fa_ticker_content li').each(function () {
                  if ($(this).height() > height_max) {
                     height_max = $(this).height();
                  }
               });

               $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft', 'auto').css('marginRight', 'auto');
               $('ul#fa_ticker_content li').height(height_max);
            }


            $('#fa_ticker_content').jcarousel({
               vertical: slid_vert,
               wrap: 'circular',
               auto: {switch_ticker.STOP_TIME},
               auto_direction: auto_dir,
               scroll: 1,
               size: {switch_ticker.SIZE},
               height_max: height_max,
               animation: {switch_ticker.SPEED}
            });
         } else {
            $('ul#fa_ticker_content li:not(:first)').css('display', 'none');
            $('ul#fa_ticker_content li:first').css('list-style', 'none').css('text-align', 'center');
         }
      });
      //]]>
   </script>
   <!-- END switch_ticker_new -->

   <script type="text/javascript">//<![CDATA[
      $(document).ready(function () {
         <!-- BEGIN switch_enable_pm_popup -->
         pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
         if (pm != null) {
            pm.focus();
         }
         <!-- END switch_enable_pm_popup -->
         <!-- BEGIN switch_report_popup -->
         report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
         if (report != null) {
            report.focus();
         }
         <!-- END switch_report_popup -->
         <!-- BEGIN switch_ticker -->
         $(document).ready(function () {
            Ticker.start({
               height: {switch_ticker.HEIGHT},
               spacing: {switch_ticker.SPACING},
               speed: {switch_ticker.SPEED},
               direction: '{switch_ticker.DIRECTION}',
               pause: {switch_ticker.STOP_TIME}
            });
         });
         <!-- END switch_ticker -->
      });

      <!-- BEGIN switch_login_popup -->
      var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH},
         logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;

      $(document).ready(function () {
         $(window).resize(function () {
            var windowWidth = document.documentElement.clientWidth;
            var popupWidth = $("#login_popup").width();
            var mypopup = $("#login_popup");

            $("#login_popup").css({
               "left": windowWidth / 2 - popupWidth / 2
            });
         });
      });
      <!-- END switch_login_popup -->
      //]]>
   </script>

   {GREETING_POPUP}

<!----------------->
<!-- CSS EXTERNE -->
<style type="text/css">
<!-- BEGIN switch_ticker_new -->
   .jcarousel-skin-tango .jcarousel-item {text-align: center;width: 10px;}
   .jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: {switch_ticker.SPACING}px;}
   .jcarousel-skin-tango .jcarousel-item-vertical {margin-bottom: {switch_ticker.SPACING}px;}
<!-- END switch_ticker_new -->
         
/****** ----------------------------------------------------------
 ****** STRUCTURE DE FORUMACTIF ----------------------------------
 ****** Elements de base qui servent à construire la page --------
 ****** Il y a peu de chances que vous deviez toucher cette partie du CSS ******/
 
/*** ------------------------------- ***/
/* BALISES GENERALES --------------- ***/

ul {list-style-type: none;padding: 0;margin: 0;}
fieldset {border: none;padding: 0;margin: 0;}
dl {display: grid;grid-template-columns: 220px auto;grid-gap: 15px}
dd {margin: 0;}
dt {margin: 0}
dt label {font-weight: bold}
button, input {border: none}
button, select, input{font-family: var(--font);cursor: pointer;}
input:is([type="text"], [type="passeword"]){cursor: text;}

/*** ----------------------------- ***/
/*** STRUCTURE DE LA TOOLBAR ----- ***/
 *** Il est conseillé de ne rien modifier pour un bon fonctionnement de la toolbar ***/
#fa_right #fa_menu ul,
#fa_right.notification #fa_menu ul,
#fa_right #fa_notifications #notif_unread {display: none}
#notif_list hr {display: none}
#fa_toolbar #live_notif .fa_notification .content {display: inline-block;}
#fa_right.welcome #fa_menulist {display: block;}
#fa_right.notification #notif_list {display: flex;}
#fa_toolbar #fa_right #fa_notifications.unread #notif_unread {display: inline;}
#fa_usermenu table {width: 100%;}
#fa_usermenu table tr {display: flex;justify-content: center;}
.fa_fix {position: fixed !important; z-index: 999;;top: 0; right: 0;}

/*** --------------------------------- ***/
/*** STRUCTURE DE LA PAGE DE CONNEXION ***/
.fld_connexion dl {display: grid;rid-row-gap: 15px; grid-template-columns: 150px auto;}
.fld_connexion dl:nth-of-type(2) dd:last-of-type {grid-column: 1 / span 2;}
.fld_connexion dl:nth-of-type(3) {margin: 0;}
.fld_connexion dl:nth-of-type(n+3) {display: block;}
.invisible {display: none;visibility: hidden;} .visible {display: block;visibility: visible;}

/* Indicateur complexité du mot de passe */
#cont_pwd {display: flex;align-items: center;height: 100%;margin-left: 5px;}
.pwd_img { padding: 2px 6px;display: none;border-radius: 3px;}
#pwd_good {background-color: #4CAF50;color: #FFF;}
#pwd_middle {background-color: #FFCC00;color: #000;}
#pwd_bad {background-color: #F04040;color: #FFF;}

/*** ------------------------------- ***/
/*** POUBELLE DE FORUMACTIF -------- ***/
#find_username br,#users_here br, #main-content > p, .adminlink br, .corners-top, .corners-bottom { display: none;}
#find_username .panel {border: none;margin: 0}
.adminlink { clear: both}
#cp-main#cp-main#cp-main, table, .quickreply div#textarea_content {width: 100% !important;}
.panel .panel { background: transparent;border: none; padding: 0;margin: 0; border-radius: 0;}
.social_btn {display: none;}
</style>

   {HOSTING_JS}

   <!-- BEGIN google_analytics_code -->
   <script async src="https://www.googletagmanager.com/gtag/js?id={G_ANALYTICS_ID}"></script>
   <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', '{G_ANALYTICS_ID}', {'anonymize_ip': true, 'store_gac': false, 'cookie_expires': 13 * 30 * 24 * 60 * 60});
      <!-- BEGIN google_analytics_code_bis -->
      gtag('config', '{G_ANALYTICS_ID_BIS}', {'anonymize_ip': true, 'store_gac': false, 'cookie_expires': 13 * 30 * 24 * 60 * 60});
      <!-- END google_analytics_code_bis -->
   </script>
   <!-- END google_analytics_code -->

<!------------------------------------->
<!-- INITIALISATION DU PLUGIN EDISON -->   
<script>
(function () {
    const html = document.documentElement;
    const theme = localStorage.getItem('theme');
    const colorScheme = localStorage.getItem('color-scheme');
 
    html.removeAttribute("data-no-js");
    colorScheme && html.setAttribute('data-color-scheme', colorScheme);
    theme && html.setAttribute('data-theme', theme);
})();
</script>

</head>

<body id="phpbb">

    <!-- Structure du forum -->
    <div class="main_forum">

        <!-- Ascenseur : renvoi vers le haut de la page -->
        <a id="top" name="top" accesskey="t"></a>
        {JAVASCRIPT}
     
     
      <!----------------------------------------------->
      <!-- ENTETE DU FORUM (au-dessus de la pub) -------------->

        <div id="page-header">

          <!-- Bannière -->
            <a href="{U_INDEX}" id="header"><img loading="lazy" src="{LOGO}" alt="{L_INDEX}" /></a>

          <!-- Barre de navigation -->
            <ul class="navbar">
                <li>{GENERATED_NAV_BAR}</li>
            </ul>
            <!-- Fin de la barre de nav -->

            <!-- Annonces défilantes -->
            <!-- BEGIN switch_ticker_new -->
            <div id="fa_ticker_blockD">
                <div class="module">
                    <div id="fa_ticker_container">
                        <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none">
                            <!-- BEGIN ticker_row -->
                            <li>{switch_ticker.ticker_row.ELEMENT}</li>
                            <!-- END ticker_row -->
                        </ul>
                    </div>
                </div>
            </div>
            <!-- END switch_ticker_new -->
           
            <!-- BEGIN switch_ticker -->
            <div id="fa_ticker_block" style="margin-top:4px;">
                <div class="module">
                    <div id="fa_ticker_container">
                        <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                            <div class="fa_ticker_content">
                                <!-- BEGIN ticker_row -->
                                <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                <!-- END ticker_row -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END switch_ticker -->
            <!-- Fin des annonces défilantes -->
        </div>
        <!-- Fin de l'entête -->
     
     
      <!----------------------------------------------->
      <!-- CONTENU DU FORUM -------------->
     
        <div id="page-body">

            <div id="{ID_CONTENT_CONTAINER}" {CLASS_CONTENT_CONTAINER}>
                <div id="outer-wrapper">
                    <div id="wrapper">
                        <div id="container">
                            <div id="content">

                                <div id="main">
                                    <div id="main-content">


Merci beaucoup à la ou les personnes qui m'ont lue et m'apporteront de l'aide. N'hésitez pas à me dire si je ne suis pas claire ou s'il manque des informations.
Belle journée !

[Chacha]

Bienvenue sur le forum de support de Forumactif Puisque vous êtes nouveau, voici quelques sujets susceptibles de vous intéresser : L'importance de garder secret l'email de fondation, Sécurité : ce qu'il ne faut pas faire, Liste des questions et réponses fréquentes, Liste des trucs et astuces, La fonction rechercher N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse.

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[diluvienne]

Bonjour, je suis toujours à la recherche d'une solution

[diluvienne]

up

[Toryudo]

Bonjour !

Alors, je n'ai pas regardé suffisamment longtemps pour affirmer à 100% que ce n'est pas possible, mais c'est ma première impression.
Autant il est possible de faire quelque chose pour les "champs du profil", autant ça me parait difficile pour les "champs de contact", parce que si je crée deux champs de type "Adresse internet" et que je les remplis avec la même adresse url, alors dans l'affichage du profil dans les messages, je n'ai plus aucun moyen de les distinguer, ils sont identiques. Pas de class pour les distinguer, donc difficile de leur associer un icon différent.

La seule solution, c'est de mettre une "URL de l'icône :" différente, donc de prendre les icons de FontAwesome et d'en faire des images.

Pour l'image des MP, vous n'avez finalement plus qu'à adopter la même solution : changer son icon directement avec une autre image. C'est le seul champ pour lequel il aurait été possible de faire quelque chose, parce qu'il a une class ou un id particulier unique, mais pour un champ, je ne suis pas sûr que ça vous intéresse...

[Chacha]

Bienvenue sur le forum de support de Forumactif Puisque vous êtes nouveau, voici quelques sujets susceptibles de vous intéresser : L'importance de garder secret l'email de fondation, Sécurité : ce qu'il ne faut pas faire, Liste des questions et réponses fréquentes, Liste des trucs et astuces, La fonction rechercher N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse.

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[diluvienne]

Bonjour Toryudo, et merci beaucoup d'avoir pris le temps de venir me répondre.  
J'avais vraiment espoir de contourner tout ça pour pouvoir passer par le CSS pour customiser les icons à chaque changement de thème sans devoir passer par un logiciel de retouche, mais si l'option n'existe pas encore chez ForumActif, et bien je ferai sans... tant pis !
Merci quand-même.  

[Ganthille]

Bonjour Diluvienne,

Oui, ce que tu désires est possible, mais je ne peux pas te dire comment procéder.

Voici ce que j'ai sur mon propre forum, tout en fontawesome :


Mon codeur n'est pas francophone, Necromancer, peut-être qu'il accepterait de t'aider si tu passes par son blog (en espagnol).

[diluvienne]

Bonjour Ganthille.
Merci pour le tuyau, je suis allée faire un tour sur son tumblr et cette personne m'a l'air effectivement très compétente en codage !
Néanmoins, avant de la contacter, je voulais m'assurer que c'est bien les icons en HTML qui sont installés sur ton forum et non pas juste l'url de l'image de l'icon. Accepterais-tu de partager une capture d'écran de la section champs de contact des profils utilisateurs dans ton panneau d'administration ?    

(Panneau d'administration -> Utilisateurs et groupes -> Profils -> Champs de contact)
Voilà ce que ça donne sur le mien, comme je ne peux qu'héberger l'icon en tant qu'image

[Ganthille]

Bonjour,

Alors non, ça se change dans le Codage/CSS ou Javascript (je n'ai pas regardé lequel je dois t'avouer) de mon forum et non pas directement sur les champs de profils, mais c'est plutôt simple à changer: je mets le nouveau lien FontAwesome au bon endroit et c'est terminé.

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 7 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est archivé afin de ne pas perdre les réponses apportées.