Partage
  • Partager sur Facebook
  • Partager sur Twitter

Bouton de partage Fa-X-Twitter

css

    10 novembre 2024 à 18:02:58

    Bonjour à tous,

    Je me débrouille dans le code, mais je ne suis pas un expert. Mon codeur qui est indisponible et non joignable ne sait pas m'aider, alors après 1h de recherches sans avoir vraiment la réponse, j'ai pensé à vous :)

    J'ai les version "tweeter" sur mes sites, et je suis en train de les changer, du moins j'essaie. J'ai trouvé pas mal de réponses, mais je n'arrive pas à l'appliquer.

    #contenu #textes .partage .partage-twitter a
    {
    	background-color: #000000;
    }
    
    #contenu #textes .partage .partage-twitter a:hover
    {
    	background-color: #494949;
    .fa-twitter:before {
    	content: "\f099";
    }

    Ci-dessus, ça appartient à un bouton pour partager une actualité sur mon site web. Je souhaite modifier ça. J'ai déjà pu bricoler quelques trucs, mais il me manques quelque chose.

    Voici le site et un exemple de post : https://www.gagner-argent.biz/investir-argent/actualites/bitcoin-semaine-decisive-chiffres-americains/

    Je n'arrive pas à placer le X de twitter (le vrai X) à la place de l'oiseau. De ce que j'ai cru comprendre, le code "content f099" est lié à l'oiseau, mais je n'arrive pas à joindre les 2 bouts pour retirer l'oiseau, placer le X et faire en sorte que le bouton soit noir, pourtant j'ai bien mis les couleurs 000000 pour la couleur.

    Merci d'avance

    • Partager sur Facebook
    • Partager sur Twitter
      10 novembre 2024 à 19:16:04

      Bonjour, si tu souhaites changer d’icône tu dois modifier le nom de la class qui fait appel à cette icône. Consulte la documentation de la librairie d’icône que tu utilises.

      Voir => https://fontawesome.com/icons/x-twitter?f=brands&s=solid

      • Partager sur Facebook
      • Partager sur Twitter
        10 novembre 2024 à 19:29:21

        Euh... il m'est impossible de vous répondre, ça me dit que j'ai été bloqué... ??

        J'ai cité votre message, j'ai répondu que j'ai déjà consulté ce site que vous m'avez transmis, mais je ne vois pas c que je dois faire. Je dois uniquement modifier la class de partage twitter par ce qu'il notent à droite sur votre site ?

        Désolé si la question parait bête...

        -
        Edité par JimMr 10 novembre 2024 à 19:31:42

        • Partager sur Facebook
        • Partager sur Twitter
          10 novembre 2024 à 19:36:33

          Changer

          <span class="fa fa-twitter"></span>

          En

          <span class="fa-brands fa-x-twitter"></span>
          




          • Partager sur Facebook
          • Partager sur Twitter
            10 novembre 2024 à 22:22:11

            AbcAbc6 a écrit:

            Changer

            <span class="fa fa-twitter"></span>

            En

            <span class="fa-brands fa-x-twitter"></span>
            


            Merci, c'est ce que j'avais déjà fait, je l'ai refait, mais ça ne fonctionne pas.

            j'ai essayé de voir pour que le css et le fichier ou se trouvent les class soient bons, mais je dois louper quelque chose je pense.



            • Partager sur Facebook
            • Partager sur Twitter
              10 novembre 2024 à 22:56:56

              Bonjour,

              la syntaxe proposée par AbcAbc6 est valide pour la dernière version de FontAwesome (la 6). Quelle version utilises-tu ?

              • Partager sur Facebook
              • Partager sur Twitter

              Pas d'aide concernant le code par MP, le forum est là pour ça :)

                10 novembre 2024 à 22:57:52

                Bonsoir, bien oui puisque dans votre CSS vous avez uniquement quelque class déclarée utilisant un fichier de police personnalisé.  Pas sur que ce fichier soit à jour et possède la dernière mise à jour de la librairie? 

                Lire la doc pour savoir comment démarrer avec cette librairie.=> https://docs.fontawesome.com/web/setup/get-started

                Je ne vois pas pourquoi inclure uniquement des parties dans votre CSS d'une librairie externe. Vous la chargez ou vous ne l'utilisez pas!! Ce n'est que du texte! Charger la librairie complète soit en l'intégrant dans votre projet soit en utilisant un CDN. Inclure entre <head> et </head> le lien de votre choix : 

                  https://cdnjs.com/libraries/font-awesome 

                Si vous ne chargez pas les class de la librairie que vous voulez utiliser cela ne peut pas fonctionner correctement!! 

                Édit :

                Lamecarlate a écrit:

                Bonjour,

                la syntaxe proposée par AbcAbc6 est valide pour la dernière version de FontAwesome (la 6). Quelle version utilises-tu ?

                D'après les metaData de son fichier /fonts/fa-brands-400.ttf version du fichier 769.01171875 (FontAwesome version 6.1.1)

                -
                Edité par AbcAbc6 10 novembre 2024 à 23:29:58

                • Partager sur Facebook
                • Partager sur Twitter
                  10 novembre 2024 à 23:58:44

                  Bonjour,

                  je vous remercie pour vos réponses, mais je crois que mes capacités sont pas assez dévloppé pour faire ce qu'il faut...

                  Je viens de passer 1h a lire c que vous avez dit, lire les liens que vous m'avez donné, mais ça me dépasse... Merci du temps que vous avez passez à me répondre. Je crois que je vais devoir attendre mon codeur, cette partie ci est un peu trop complexe pour moi...

                  • Partager sur Facebook
                  • Partager sur Twitter
                    11 novembre 2024 à 0:19:22

                    Il n'y a rien de compliquer la dedans. Dans le <head> faire appel à la css avant vos css custom comme ceci :

                     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
                        integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
                        crossorigin="anonymous" referrerpolicy="no-referrer" />
                      
                      <link type="text/css" rel="stylesheet" href="/style.css">
                      <link type="text/css" rel="stylesheet" href="/device.css">

                    Dans le <body> utiliser les class qui permettent d'afficher l’icône désirée :

                    <span class="fa-brands fa-x-twitter"></span>

                    Et tout roule...

                    Mais effectivement développer est un métier, cela ne s'improvise pas!!

                    Bonne continuation.

                    • Partager sur Facebook
                    • Partager sur Twitter
                      11 novembre 2024 à 0:44:58

                      AbcAbc6 a écrit:

                      Il n'y a rien de compliquer la dedans. Dans le <head> faire appel à la css avant vos css custom comme ceci :

                       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
                          integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
                          crossorigin="anonymous" referrerpolicy="no-referrer" />
                        
                        <link type="text/css" rel="stylesheet" href="/style.css">
                        <link type="text/css" rel="stylesheet" href="/device.css">

                      Dans le <body> utiliser les class qui permettent d'afficher l’icône désirée :

                      <span class="fa-brands fa-x-twitter"></span>

                      Et tout roule...

                      Mais effectivement développer est un métier, cela ne s'improvise pas!!

                      Bonne continuation.

                      Oui, mais c'est pas comme ça que le codeur l'avait fait il me semble, ici c'est un bouton qui s'affiche en bas de chaque article posté.

                      Effectivement, développer est un métier. Moi je suis plutôt un bricoleur, moi c'est plus la "base" de base..

                      -
                      Edité par JimMr 11 novembre 2024 à 0:45:40

                      • Partager sur Facebook
                      • Partager sur Twitter
                        11 novembre 2024 à 2:44:27

                        >> Oui, mais c'est pas comme ça que le codeur l'avait fait il me semble,

                        C'est exact, il a bricolé un truc qui n'est ni maintenable, ni évolutif. (vous pouvez l'inviter sur ce sujet comme cella il apprendra également). 

                        Ce qu'il à fait, il à uploader dans un répertoire /fonts/ des fichiers de polices FontAwesome et dans la CSS custom il à recopié uniquement les styles d’icône qu'il utilise.

                        Mais voila qu'une nouvelle icône est nécessaire dans le projet. Que faire? Pour autant que le fichier de police contienne la nouvelle icône, il faut ajouter la class correspondante dans la CSS custom. Et l'année prochaine une nouvelle icône est nécessaire dans le projet. Rebelote on n'est reparti pour trouver le code correspondant à la nouvelle icône et modification du fichier CSS encore une fois. 

                          Ce n'est pas de cette façon que l'on intègre une bibliothèque quelle qu'elle soit. On insère les fichiers de cette bibliothèque et on surcharge via le CSS custom si nécessaire.

                        Avantages : 1) On dispose de toutes les définitions d’icônes dans un seul et unique fichier (CDN ou CSS dans votre projet). 2) On ne se soucie pas de comment est déclaré ce fichier de définition, on utilise les class qui sont indiquées dans la documentation de cette librairie. 3) En cas de changement de version de cette librairie on upgrade le numéro de version (CDN) ou l'on intègre un nouveau fichier CSS à la place de l'ancien. 

                        Vous avez tout avantage pour un projet évolutif d'intégrer l'entièreté de la librairie et pas des petits bout de CSS que vous ajouter par ci par la dans votre CSS custom.

                        En faisant comme je l'indiques vous opterez ceci :

                        Pour un état hover ceci : 

                        >> ici c'est un bouton qui s'affiche en bas de chaque article posté.

                        Oui j'ai bien vu, il faut voir comment cela à été coder. J’espère que ces trois boutons ne sont pas codés indépendamment sur chaque page. Vous devriez modifier une partie de votre site, et la modification doit se répercuter sur toutes les pages.  Si ce n'est pas le cas, c'est que c'est mal développé/construit/pensé.

                        Édit : Il est également possible d'intégrer le SVG si vous ne souhaitez pas charger la librairie version 6 dans laquelle ce trouve l’icône que vous souhaitez.

                        -
                        Edité par AbcAbc6 11 novembre 2024 à 3:04:35

                        • Partager sur Facebook
                        • Partager sur Twitter

                        Bouton de partage Fa-X-Twitter

                        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                        • Editeur
                        • Markdown