Modification icone mp par icone FontAwesome

par musikxaddict Sam 7 Jan 2023 - 19:40

Détails techniques

Version du forum : ModernBB
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Opera
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 07/01/2023
Lien du forum : https://unautresitetest.forumactif.com/

Description du problème

Bonjour à vous,

Je suis présentement en création de design et j'aimerais pouvoir modifier l'image "icon mp" (tant de la page profil d'utilisateur que le profil des messages) par un icône FontAwesome. J'ai réussi à modifier l'icône pour du texte grâce à un script JS, mais je ne sais pas en fait si la solution à mon problème passe par là. (Le script pour modifier l'icône en texte est directement dans la template que vous trouverez ci-dessous.)

template profile_view_body:

Code::   <div class="container" id="wombat"> <div class="leprofil"> <div class="leusername"> {USERNAME} </div> <div class="avainfos"> <span class="avaprofil">{AVATAR_IMG}</span> <div class="something"> <span id="identifiants">this is life</span><span class="iconscontact"> <em class="fa-duotone fa-book-user"></em> <em class="fa-duotone fa-book-bookmark"></em> <em class="fa-duotone fa-users-medical"></em></span> </div> <div class="something"> <span id="identifiants">let's keep in touch</span><span class="iconscontact"> <em class="fa-duotone fa-mobile"></em> <em class="fa-brands fa-instagram"></em> <em class="fa-brands fa-twitter"></em> <a href="/privmsg?mode=post&u=1"><em class="fa-duotone fa-paper-plane-top"></em></a> </span> </div> <div class="something"> <span id="identifiants">check my work</span><span class="iconscontact"> <a rel="nofollow" href="/st/{PUSERNAME}" id="alltopics"> <em class="fa-duotone fa-file-pen"></em></a> <a rel="nofollow" href="/sta/{PUSERNAME}" id="alltopics"> <em class="fa-duotone fa-files"></em></a> <a rel="nofollow" href="/spa/{PUSERNAME}" id="allposts"><em class="fa-duotone fa-messages"></em></a></span> </div> </div> <div class="lesinfosduperso"> <div class="infosnom"> <div class="triggers"> <div> <span id="identifiants">ce profil contient des mentions de</span><span class="name"> alcoolisme, dépression, meurtre, décès de proches, abandon, autre trigger potentiel ici</span> </div> </div> <div class="idnom"> <div> <span id="identifiants">dernière connexion</span> {LAST_VISIT_TIME} </div> <div class="ptiticon2"> <span class="leonline"> {USER_ONLINE}</span> </div> </div> </div> <div class="idicons"> <div class="line"> </div> <div class="imageprfl"> <img src="https://64.media.tumblr.com/5c6d3ac5eb6d0c1c91af362f467efd92/tumblr_inline_ohaueulRFh1rifr4k_500.gif" /> </div> </div> <div class="tabs-wrapper"> <input type="radio" name="tab" id="tab1" class="tab-head" checked="checked" /> <label class="lepremier" for="tab1"><em class="fa-duotone fa-house"></em></label> <input type="radio" name="tab" id="tab2" class="tab-head" /> <label for="tab2"><em class="fa-duotone fa-note-sticky"></em></label> <input type="radio" name="tab" id="tab3" class="tab-head" /> <label for="tab3"><em class="fa-duotone fa-icons"></em></label> <input type="radio" name="tab" id="tab4" class="tab-head" /> <label for="tab4"><em class="fa-duotone fa-mug-saucer"></em></label> <input type="radio" name="tab" id="tab5" class="tab-head" /> <label for="tab5"><em class="fa-duotone fa-keyboard"></em></label> <input type="radio" name="tab" id="tab6" class="tab-head" /> <label for="tab6"></label> <div class="tab-body-wrapper"> <div id="tab-body-1" class="tab-body">  <div class="moreinfocharacter"> <div> <span id="identifiants" class="label"><label>{profile_field.LABEL}</label></span> </div> <div class="ptiticon2"> <em class="fa-duotone fa-cake-candles"> </em> </div> </div> {profile_field.CONTENT} <script>document.getElementById('identifiants').innerHTML=document.getElementById('identifiants').innerHTML.replace(/:/,"");</script> <div class="moreinfocharacter"> <div> <span id="identifiants">pronoms et identification de genre</span> </div> <div class="ptiticon2"> <em class="fa-duotone fa-venus-mars"> </em> </div> </div> cisgenre, il/he/him <div class="moreinfocharacter"> <div> <span id="identifiants">surnoms</span> </div> <div class="ptiticon2"> <em class="fa-duotone fa-signature"> </em> </div> </div> le seul surnom qu'on lui donne est <em>zek</em>, accompagné de toutes les déclinaisons possibles. <div class="moreinfocharacter"> <div> <span id="identifiants">statut civil</span> </div> <div class="ptiticon2"> <em class="fa-duotone fa-rings-wedding"></em> </div> </div> célibataire, il n'y a qu'une seule femme qui aura su ravir son coeur. elle n'était encore que gamine à cette époque, mais déjà, Ezeckiel se voyait vivre ses vieux jours à ses côtés. Suite au drame, les années ont passés et Ezeckiel se vit forcé de vivre sans elle. Pourtant, ni le temps, ni la distance n'auront eu raison de cet amour qu'il a toujours éprouvé pour elle. Il aura tant bien que mal tenté de se satisfaire du <em>second best</em>, mais tout le ramenait toujours à elle. <em>His one and only.</em> <div class="moreinfocharacter"> <div> <span id="identifiants">occupation</span> </div> <div class="ptiticon2"> <em class="fa-duotone fa-briefcase"></em> </div> </div> avocat en droit familial <div class="moreinfocharacter"> <div> <span id="identifiants">lieu d'habitation</span> </div> <div class="ptiticon2"> <em class="fa-duotone fa-location-dot"></em> </div> </div> après avoir vécu quelques années dans un appartement, c'est une petite maison bien cozy qu'ezeckiel a acheté. son premier <em>vrai</em> chez-soi dans un quartier paisible, une maison avec juste assez pour qu'il s'y sente bien, loin des artifices que sa vie d'antan a pu lui conférer dans sa jeunesse. une maison qu'il partage aujourd'hui avec louise. <em>leur maison.</em> </div> <div id="tab-body-2" class="tab-body"> espace libre pour y ajouer ce que le membre veut </div> <div id="tab-body-3" class="tab-body"> <div class="moreinfocharacter"> <span id="identifiants">badges gagnés en jeu</span> </div> <img class="badge" src="https://cdn-icons-png.flaticon.com/512/1903/1903192.png" /> <div class="moreinfocharacter"> <span id="identifiants">badges gagnés hors jeu</span> </div> </div> <div id="tab-body-4" class="tab-body"> <div class="moreinfocharacter"> <div> <span id="identifiants">nombres de mots</span> </div> <div class="ptiticon2"> <em class="fa-duotone fa-typewriter"></em> </div> </div> cinq-cent au minimum <div class="moreinfocharacter"> <div> <span id="identifiants">style d'écriture</span> </div> <div class="ptiticon2"> <em class="fa-duotone fa-quote-left"></em> </div> </div> troisième personnedu singulier, surtout au passé. dialogues en français ou en anglais. <div class="moreinfocharacter"> <div> <span id="identifiants">disponibilité</span> </div> <div class="ptiticon2"> <em class="fa-duotone fa-play-pause"></em> </div> </div> (0/0 disponible) <div class="moreinfocharacter"> <div> <span id="identifiants">présence</span> </div> <div class="ptiticon2"> <em class="fa-duotone fa-island-tropical"></em> </div> </div> écrire ici si vous êtes présent, en absence, ou en pr avec la date prévue de votre retour. <div class="moreinfocharacter"> <div> <span id="identifiants">avatar</span> </div> <div class="ptiticon2"> <em class="fa-duotone fa-face-viewfinder"></em> </div> </div> aaron tveit <div class="moreinfocharacter"> <div> <span id="identifiants">crédits</span> </div> <div class="ptiticon2"> <em class="fa-duotone fa-copyright"></em> </div> </div> écrire ici les crédits pour toutes les images de votre profil et de votre signature. <strong>petit rappel : le simple nom du site n'est pas un crédit.</strong> </div> <div id="tab-body-5" class="tab-body"> <div class="moreinfocharacter"> <div> <span id="identifiants">prénom/pseudo</span> </div> <div class="ptiticon2"> <em class="fa-duotone fa-user-crown"></em> </div> </div> marie <div class="moreinfocharacter"> <div> <span id="identifiants">pronoms</span> </div> <div class="ptiticon2"> <em class="fa-duotone fa-venus-mars"> </em> </div> </div> elle/she/her <div class="moreinfocharacter"> <div> <span id="identifiants">fuseau horaire</span> </div> <div class="ptiticon2"> <em class="fa-duotone fa-clock"></em> </div> </div> est <div class="moreinfocharacter"> <div> <span id="identifiants">trigger</span> </div> <div class="ptiticon2"> <em class="fa-duotone fa-triangle-exclamation"></em> </div> </div> écrire vos triggers personnels ici et les sujets que vous ne voulez pas jouer. <div class="moreinfocharacter"> <div> <span id="identifiants">discord</span> </div> <div class="ptiticon2"> <em class="fa-brands fa-discord"></em> </div> </div> votre identifiant discord <div class="moreinfocharacter"> <div> <span id="identifiants">multicomptes</span> </div> <div class="ptiticon2"> <em class="fa-duotone fa-users-viewfinder"></em> </div> </div> aucun pour le moment </div> </div> </div> </div> </div>  <h1 class="page-title">{USERNAME}</h1>  <div class="user_profile">  <div class="profile_avatar" id="user_avatar"> {AVATAR_IMG}</div>  <div class="profile_infos"> <div class="profile_contact right">  <form action="{S_PROFILE_ACTION}" method="post" name="post">  <div id="field_id{contact_field.ID}">{contact_field.CONTENT}</div>  </form> </div> <dl id="field_id{contact_field.ID}" class="left-box details" style="width: 80%;"> <dt>{contact_field.LABEL}</dt> <dd>{contact_field.CONTENT}</dd> </dl> <script> $(function(){ $('#i_icon_pm').replaceWith("<i class="fa-regular fa-paper-plane"></i>"); }); </script>  <strong>{POSTER_RANK}</strong><br />   <span class="leonline"> <a href=""> {USER_ONLINE}</a></span>  <br/>  <div class="profile_content">  <div class="profile_field"> <label>{L_LAST_VISITED} :</label> <field>{LAST_VISIT_TIME}</field> </div>  <div class="privatemsg">{postrow.displayed.contact_field.CONTENT}</div><br /> <script> $(function(){ $('#i_icon_pm').replaceWith("envoyer un message privé"); }); </script>   <div class="moreinfocharacter"><span id="identifiants"> <label>{profile_field.LABEL}</label></span> <div class="ptiticon2"> <em class="fa-duotone fa-cake-candles"> </em> </div></div> <field>{profile_field.CONTENT}   <a rel="nofollow" href="/st/{PUSERNAME}" id="opentopics">{L_SEARCH_USER_POSTS} :</a> <br /> <a rel="nofollow" href="/sta/{PUSERNAME}" id="alltopics">{L_TOPICS}</a>   -  <a rel="nofollow" href="/spa/{PUSERNAME}" id="allposts">{L_POSTS}</a>   </field>     <div class="profile_field"> <label>{switch_rpg.rpg_fields.F_NAME} :</label> <field>{switch_rpg.rpg_fields.F_VALUE_NEW}</field> </div>  <fieldset class="submit-buttons">{U_ADMIN_RPG_NEW}</fieldset>  </div>  </div> </div>   <div class="profile_admin">{ADMINISTRATE_USER}{BAN_USER}</div>  </div> <script src="{JQUERY_ROOT}json/jquery.json-1.3.min.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function() { $('[id^=field_id]').each(function() { if ($(this).find('.field_editable').is('span, div')) { $(this).hover(function() { if ($(this).find('.field_editable.invisible').is('span, div')) { $(this).find('.field_editable').prev().addClass('ajax-profil_hover').parent().addClass('ajax-profil_parent').append('<div class="ajax-profil_edit"><img src="{AJAX_EDIT_IMG}" /></div>'); $(this).find('.ajax-profil_edit').attr({ alt: "{L_FIELD_EDIT_VALUE}", title: "{L_FIELD_EDIT_VALUE}" }).click(function() { $(this).prev().prev().removeClass('ajax-profil_hover').addClass('invisible').next().removeClass('invisible').append('<img src="{AJAX_VALID_IMG}" class="ajax-profil_valid" />').find('input,select'); $(this).prev().find('.ajax-profil_valid').attr({ alt: "{L_VALIDATE}", title: "{L_VALIDATE}" }).click(function() { var content = new Array(); $(this).parent().find('[name]').each(function() { var type_special = $(this).is('input[type=radio],input[type=checkbox]'); if ((type_special && $(this).is(':checked')) || !type_special) { content.push(new Array($(this).attr('name'), $(this).attr('value'))); } }); var id_name = $(this).parents('[id^=field_id]').attr('id'); var id = id_name.substring(8, id_name.length); $.post( "{U_AJAX_PROFILE}", { id: id, user: "{CUR_USER_ID}", active: "{CUR_USER_ACTIVE}", content: $.toJSON(content), tid: "{TID}" }, function(data) { $.each(data, function(i, item) { $('[id=field_id' + i + ']').find('.field_uneditable').html(item).end().find('.ajax-profil_valid').remove().end().find('.field_editable').addClass('invisible').end().find('.field_uneditable').removeClass('invisible'); }); }, "json" ); }); $(this).remove(); }); } }, function() { if ($(this).find('.field_editable.invisible').is('span, div')) { $(this).find('.field_editable').prev().removeClass('ajax-profil_hover'); $(this).find('.ajax-profil_edit').remove(); } }); } }); }); //]]> </script>

J'aimerais que l'icône FontAwesome soit cliquable et qu'elle mène directement à l'envoie d'un message à l'utilisateur concerné. J'ai également tenté de mettre l'icône FontAwesome et d'ajouter le lien qui mène à la création d'un nouveau mp avec la variable {PUSERNAME}, mais il semblerait que ce ne soit pas non plus la bonne solution non plus.

Mes templates ont été modifiées, la base de mon forum étant le blank theme de Geniuspanda (https://blank-theme.com/).

En espérant que mes explications soient claires.

Merci à ceux qui apporteront leur aide.

par **Lixyr** Sam 7 Jan 2023 - 22:01

Modification icone mp par icone 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.

par musikxaddict Dim 8 Jan 2023 - 6:31

En bidouillant un peu, j'ai réussi à résoudre le problème. Il m'a suffit d'ajouter une pseudo classe :before dans laquelle j'ai mis l'icône en content et cacher l'image.

Problème résolu.

Modification icone mp par icone FontAwesome