Remplacer les boutons de contact du profil par des icons FontAwesome

4 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Remplacer les boutons de contact du profil par des icons FontAwesome

Message par diluvienne Jeu 7 Mar 2024 - 12:00

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. I love you

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) :
Remplacer les boutons de contact du profil par des icons FontAwesome 163Pg3B

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 !
diluvienne

diluvienne
Nouveau membre

Messages : 5
Inscrit(e) le : 27/01/2024

https://neverfoundv2.forumactif.com/
diluvienne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Remplacer les boutons de contact du profil par des icons FontAwesome

Message par Chacha Mer 13 Mar 2024 - 9:00

Remplacer les boutons de contact du profil par des icons FontAwesome 4qhGdLE
Bienvenue sur le forum de support de Forumactif

Puisque vous êtes nouveau, voici quelques sujets susceptibles de vous intéresser :
N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse.
Remplacer les boutons de contact du profil par des icons FontAwesome UmaslZ4Bonjour,

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

Chacha
Modéractif
Modéractif

Masculin
Messages : 69427
Inscrit(e) le : 21/08/2010

https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Remplacer les boutons de contact du profil par des icons FontAwesome

Message par diluvienne Mer 13 Mar 2024 - 13:00

Bonjour, je suis toujours à la recherche d'une solution Remplacer les boutons de contact du profil par des icons FontAwesome 1f60a
diluvienne

diluvienne
Nouveau membre

Messages : 5
Inscrit(e) le : 27/01/2024

https://neverfoundv2.forumactif.com/
diluvienne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Remplacer les boutons de contact du profil par des icons FontAwesome

Message par diluvienne Lun 18 Mar 2024 - 8:25

up Remplacer les boutons de contact du profil par des icons FontAwesome 1f495
diluvienne

diluvienne
Nouveau membre

Messages : 5
Inscrit(e) le : 27/01/2024

https://neverfoundv2.forumactif.com/
diluvienne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Remplacer les boutons de contact du profil par des icons FontAwesome

Message par Toryudo Jeu 21 Mar 2024 - 8:45

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...
Toryudo

Toryudo
Aidactif
Aidactif

Masculin
Messages : 1370
Inscrit(e) le : 31/03/2020

https://deus-academia.forumactif.com/
Toryudo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Remplacer les boutons de contact du profil par des icons FontAwesome

Message par Chacha Dim 24 Mar 2024 - 10:16

Remplacer les boutons de contact du profil par des icons FontAwesome 4qhGdLE
Bienvenue sur le forum de support de Forumactif

Puisque vous êtes nouveau, voici quelques sujets susceptibles de vous intéresser :
N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse.
Remplacer les boutons de contact du profil par des icons FontAwesome UmaslZ4Bonjour,

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

Chacha
Modéractif
Modéractif

Masculin
Messages : 69427
Inscrit(e) le : 21/08/2010

https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Remplacer les boutons de contact du profil par des icons FontAwesome

Message par diluvienne Dim 24 Mar 2024 - 10:43

Bonjour Toryudo, et merci beaucoup d'avoir pris le temps de venir me répondre.  Remplacer les boutons de contact du profil par des icons FontAwesome 1f33b
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.  Remplacer les boutons de contact du profil par des icons FontAwesome 1f60a
diluvienne

diluvienne
Nouveau membre

Messages : 5
Inscrit(e) le : 27/01/2024

https://neverfoundv2.forumactif.com/
diluvienne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Remplacer les boutons de contact du profil par des icons FontAwesome

Message par Ganthille Lun 25 Mar 2024 - 17:17

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).
Ganthille

Ganthille
*

Messages : 42
Inscrit(e) le : 26/03/2021

https://frost.forumactif.com/
Ganthille a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Remplacer les boutons de contact du profil par des icons FontAwesome

Message par diluvienne Mar 26 Mar 2024 - 12:41

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 ?  Remplacer les boutons de contact du profil par des icons FontAwesome 1f604  

(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
Remplacer les boutons de contact du profil par des icons FontAwesome Captur16
diluvienne

diluvienne
Nouveau membre

Messages : 5
Inscrit(e) le : 27/01/2024

https://neverfoundv2.forumactif.com/
diluvienne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Remplacer les boutons de contact du profil par des icons FontAwesome

Message par Ganthille Mar 26 Mar 2024 - 20:14

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é.
Ganthille

Ganthille
*

Messages : 42
Inscrit(e) le : 26/03/2021

https://frost.forumactif.com/
Ganthille a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Remplacer les boutons de contact du profil par des icons FontAwesome

Message par Chacha Lun 1 Avr 2024 - 9:12

Remplacer les boutons de contact du profil par des icons FontAwesome UmaslZ4Bonjour,

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

Chacha
Modéractif
Modéractif

Masculin
Messages : 69427
Inscrit(e) le : 21/08/2010

https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Remplacer les boutons de contact du profil par des icons FontAwesome

Message par Chacha Mar 2 Avr 2024 - 9:14

Remplacer les boutons de contact du profil par des icons FontAwesome 8djze9qBonjour,

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.
Chacha

Chacha
Modéractif
Modéractif

Masculin
Messages : 69427
Inscrit(e) le : 21/08/2010

https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum