How to add new social icons in Divi's footer?

Updated on 07/12/2018 | Published on 27/01/2018 | 52 comments

It's still annoying, a theme like Divi that allows you to display in the footer only Facebook, Twitter, Google+ and RSS icons... What about other social networks? Don't you want to add the Instagram icon or the YouTube icon for example? I suspect so, otherwise you wouldn't be reading this article! Indeed, it is possible to add icons in Divi's footer but not in a native way...

It will be necessary to modify the code a little with the help of a child theme. In this article, we will detail all the steps to achieve this... and you will be proud to be 😉

Also to be read: how to reveal the footer to the mouse scroll?

 

Advertisement: This article contains affiliate links that you will easily recognize. Classic links are in purple and sponsored links are in pink.

 

1 - Divi natively embeds 15 social network icons

It should be noted that Divi comes with 15 social media icons that you can include in your footer or any other place. Divi's style.css file, located in the theme directory, shows us exactly how many social media icon possibilities the theme includes by default:

 
 .et-social-facebook a.icon:before { content: '\e093'; }
 .et-social-twitter a.icon:before { content: '\e094'; }
 .et-social-google-plus a.icon:before { content: '\e096'; }
 .et-social-pinterest a.icon:before { content: '\e095'; }
 .et-social-linkedin a.icon:before { content: '\e09d'; }
 .et-social-tumblr a.icon:before { content: '\e097'; }
 .et-social-instagram a.icon:before { content: '\e09a'; }
 .et-social-skype a.icon:before { content: '\e0a2'; }
 .et-social-flikr a.icon:before { content: '\e0a6'; }
 .et-social-myspace a.icon:before { content: '\e0a1'; }
 .et-social-dribbble a.icon:before { content: '\e09b'; }
 .et-social-youtube a.icon:before { content: '\e0a3'; }
 .et-social-vimeo a.icon:before { content: '\e09c'; }
 .et-social-rss a.icon:before { content: '\e09e'; }

This means that these icons are already embedded and that it will not be complicated to use them.

 

2 - How to add icons in Divi's footer like Instagram, Pinterest, YouTube, Linkedin etc.?

In the article on the general Divi optionswe had seen how to activate Facebook, Twitter, Google+ and RSS icons for your site. To add other icons, you will have to put your hands a little bit in the code using the information seen in the previous paragraph... Nothing very complicated if you follow these steps :

  1. First of all, you're going to have to create a child theme
  2. Then, you will open the folder of your Divi theme (the original theme) to find the folder named includes.
  3. Once this folder includes located, you will copy the file named social_icons.php to paste it into your child theme (at the root)
  4. Edit this file named social_icons.php to add icons in Divi's footer. You can open it using a text editor such as Brackets or SublimText for example.
  5. For each social network you wish to add, you will need to insert the following lines, knowing that each element in red must be modified according to your needs:
  6. et-social-reseaux-au-choix"> url-de-votre-profil" class="icon"> ReseauxSocial', 'Divi' ); ?>

To better understand, here are the codes associated with each social network:

 

I want to know more about this Divi theme....

 

3 - Where to insert the code of each social network in the social file_icon.php?

You will have to insert the codes of each network imperatively between the tags

    and
. Be aware that the order in which you insert your icons will be the order in which they appear in the footer of your site.

Où ajouter les nouveaux icônes dans le footer de Divi

Where to add the new icons in Divi's footer? Be careful not to break the existing code

In the screenshot above, I have indicated with arrows the places where you can add the code of additional icons.

For example, if you want your new icons to be added after the RSS icon, you will need to add the code between line 35 and line 37.

As well as if you want them to appear before Facebook's, you will need to insert the code between line 1 and line 3.

In the next screenshot, I inserted the code at the end of the file, just before closing the tag :

ajouter des icônes dans le footer de Divi

Add icons in Divi's footer, just after the RSS icon

 

4 - Last step: modify the file footer.php

For now, the code has been added for your new icons. Now we have to make them appear. For that you will have to make one last small modification:

  1. In the file of your Divi parent theme, copy the file named footer.php
  2. Paste this file into your child theme (it's the same manipulation as for the social_icons.php file)
  3. Edit this file using a text editor
  4. In line 44 (since version 3.18.2 of Divi), you will have to change the path to reach the file social_icons.php that you have just inserted in your child theme
  5. The new path will have to be "social_icons instead of "includes/social_icons
  6. To better understand, look at the screenshot below:

Divi footer icons

Now your new icons should appear in the footer of your Divi site.

Résultat côté Front-End d'ajout d'icône Divi

On the Front-End side, here is the result of adding icons

 

In conclusion....

The Divi theme is versatile and easy to modify, you've seen it, it was very easy to add icons in Divi's footer. There is always a solution when customizations are not available from the options available in the administrator part. Some other WordPress themes are much more complicated to modify - believe me - it's also one of them of why I like using Divi... If you want more tips to customize your Divi theme, I'll give you an appointment here!

 

Comment ajouter des icônes dans le footer de Divi

How to add icons in Divi's footer - Say it on Pinterest!

Divi tutorial : add more social icons in footer

You should like it too:

Responsive Design Divi : comment gérer les différentes tailles d’écran ?

Responsive Design Divi: how to manage different screen sizes?

Many users are asking the question: how can Divi's Responsive Design be optimized? Many options are available natively in Divi to enhance the design on your various screens. But sometimes you will also have to modify the Media Queries. Find out how in this complete guide!

Créez un bouton « retour vers le haut » personnalisé en quelques clics !

Create a custom "back up" button in just a few clicks!

When I tell you we can do anything with Divi! No need to code or install many plugins... You just have to know where to look: the options are there! In this article, I'll show you how to create a back-to-top button in just a few clicks!

52 Commentaires

  1. morel fabien

    Bonjour

    Merci d’abord pour ces tutos bien utile pour les non initiée a la programmation.
    Cependant j’ai une question:
    Une fois le dossier « includes » édité faut il le redéplacer dans le thème parent ?
    Car dans tous les cas je n’arrive pas à le copier, mais juste à le déplacer.

    Ensuite, est ce normal que lorsque je fais une mis à jour de Divi l’icône disparait ? Faut il effectuer la manip à chaque mis à jour ?

    Merci d’avance

  2. Lycia

    Bonjour Fabien. Non justement le thème enfant doit vous protéger des mises à jour. Il ne faut surtout pas déplacer le dossier INCLUDES mais il faut le dupliquer et placer cette copie à l’intérieur de votre thème enfant. De ce fait ce sera ce dossier contenant le fichier édité qui sera pris en compte à la place de celui du thème parent. C’est le but du thème enfant, j’espère que ces informations complémentaires vous aideront. Bonne continuation. Lycia

  3. Marie

    Bonjour Lycia, merci beaucoup pour tous ces tutos simples et de qualité.
    J’ai fait le document social_icons.php comme tu l’as expliqué, mais je me demande maintenant comment l’intégrer dans WordPress? Dois-je recharger mon thème enfant?

    merci!

  4. Lycia

    Bonjour Marie. En effet, le dossier Includes contenant le fichier Social Icons doit être ajouté dans ton thème enfant. Si ton thème enfant est déjà dans ton hébergement, il faudrait y rajouter ces fichiers afin d’intégrer les modifications. J’espère t’avoir aidé !

  5. Bayle

    Bonjour,
    Je vous remercie pour ce super tutoriel. Toutefois, il me reste une question. Comment faire pour rajouter l’icône du réseau Viadeo, celui-ci n’étant pas à priori dans la liste standard de divi ?

  6. Lycia

    C’est une bonne question. Avec ce tuto ce n’est pas possible.

  7. Lycia

    Génial Marie ! Merci ! Je vais tester !

  8. David

    Bonjour Lycia,

    Merci pour ce tuto, juste une petite remarque, il est aussi possible de créer directement dans le child Theme un dossier includes et d’y copier uniquement le fichier social_icons.php. cela évite de transférer tout le dossier includes du parent vers le child theme. puis ajouter le code de l’icon du reseau social souhaité dans le style.css.

  9. Lycia

    Bonjour David. Je comptais justement modifier l’article en ce sens là. En effet, conserver l’entièreté du dossier Includes n’est pas une bonne idée. Vous avez alors 2 solutions : soit placer le fichier social_icons.php dans un dossier includes vierge, soit changer le Path et placer le social_icons.php à la racine du thème enfant. J’espère vous avoir aidé. Bonne journée. Lycia.

  10. Eric

    Bonjour Lycia,
    Mais ensuite comment fait-on pour insérer les URL correspondantes aux différents réseaux sociaux ajoutés ?

  11. Eric

    Sais-tu également comment faire pour que les liens s’ouvrent dans une nouvelle fenêtre ? 🙂

  12. Lycia

    Tu l’ajoutes dans le code directement 😉

  13. Sylbohec

    Top le tuto, très facile à réaliser MERCI.
    Personnellement, j’ai juste un problème , les icônes ne s’affiche pas !!
    Est-ce que j’aurais un souci de cache ou de font ?

  14. Lycia

    Bonsoir. Peut-être le cache ? Mais il faut surtout regarder si le code est bien écrit, des fois une petite virgule qui manque et ça marche pas…

  15. Jean-Michel

    Bonsoir,
    Peut-etre suis-je le seul dans ce cas, peut-etre pas, aniway, apres la mise a jour Divi 3.18.2 et WordPress 5.0, seul l’icone Instagram ajoutee en footer a disparu. Le code y est toujours dans le fichier social_icons.php.
    Une idee ?

  16. Jean-Michel

    Bonsoir,
    Depuis la mise a jour Divi 3.18.2 et WordPress 5.0, les icones ajoutees par le fichier « social_icon » ne s’affichent plus !
    Une idee Lycia ?

  17. Lycia Diaz

    Bonsoir Jean Michel, je vais regarder…

  18. Lycia Diaz

    Je pense que si vous avez suivi mon tuto, je conseillais de copier le dossier INCLUDES dans votre thème enfant et de modifier le fichier SOCIAL ICONS. Etant donné que le dossier INCLUDES contient de nombreux autres fichiers, il est possible qu’avec la mise à jour certains de ces fichiers aient été modifiés. Il faudrait voir pour recommencer l’opération avec le fichier INCLUDES de la nouvelle version de Divi. Si vous voulez, attendez un peu, je vais essayer…

  19. Lycia Diaz

    Voilà Jean Michel,
    Je viens de mettre l’article à jour. Les principaux changements ont été faits dans le point 2 et le point 4 de cet article. Lisez attentivement. Pour ne pas vous emmêler les pinceaux n’hésitez pas à reprendre le tuto depuis le début… 😉

  20. Jean-Michel

    Bonjour Lycia.
    Je viens de decouvrir votre post et vous en remercie.
    J’ai copier le fichier « footer.php » de mon theme Divi dans le dossier de mon theme enfant Divi et ai procede a la modif du code a la ligne 44 mais rien n’y fait. Enregistrement de la modif et cache du navigateur vidé.

  21. Lycia Diaz

    C’est bizarre. Tout marche pour moi… vous avez bien supprimé le dossier includes du thème enfant et mis le social icons à la racine du thème enfant ?

  22. Jean-Michel

    Oui, j’ai verifie et reverifie. Je me demande si le fait d’avoir passe en 3.18.2 de DIVI APRES le passage en 5.0 de WP y est pour quelque-chose finalement. Tout le reste fonctionne apparemment correctement. Bizarre ?

  23. Jean-Michel

    Oui j’ai bien supprime le dossier includes du theme enfant et mis le social icons a la racine du theme enfant.
    En fait je me demande si le passage de Divi en 3.18.2 APRES le passage de WP en 5.0 y est pour quelque-chose ? Si oui, ou cela peut-il etre cache ?
    PS: desole pour les accents, je suis sur un claiver US, merci de votre aimable comprehension.

  24. Lycia Diaz

    Je ne sais pas trop Jean Michel, pour moi tout marche…

  25. Jean-Michel

    Je reviens vers vous Lycia pour un feedback. Mon theme enfant Divi-child n’etait plus pris en compte, pourquoi… mystere. Divi a publie une mise a jour en 3.18.3. Je l’ai installee et tout est rentre dans l’ordre sans toucher a mon theme enfant. Conclusion, le theme enfant peut etre impacte indirectement.

  26. Lycia Diaz

    ok ! tout est bien qui fini bien 😉

  27. kevin.tartary

    Bonjour Lycia,

    Merci pour le tuto: je l’ai suivi à la lettre mais rien ne fonctionne pour moi. Lorsque que je colle les bouts de codes dans le style.css du thème enfant, wordpress me signale 39 erreurs « unexpected token » : je suppose que ça vient de là mais pourtant je ne fais que des copier coller…

    Pouvez-vous m’aider ?

    Merci d’avance

  28. Jean-Michel

    Bonjour,
    Les icones apparaissent deformees sous Chromium et Opera.
    Y a-t-il une astuce pour corriger ceci ?

  29. Lycia Diaz

    Bonjour Jean Michel. Je trouve cela bizarre. Avez-vous un plugin de cache ? Sur les autres navigateurs ça marche ?

  30. Jean-Michel

    Bonjour,
    non, je n’ai pas de plugin de cache sur les autres navigateurs. Je parle des icones des menus « Friends », « Contact », « Forum », et « Blog » par exemple. Si vous connectez a l’adresse http://www.judogokyo.com au moyen de Opera ou Chromium obtenez-vous aussi ces resultats ?

  31. Lycia Diaz

    Bonsoir Jean Michel. Je vais essayer de regarder ça dans la semaine et je reviens vers vous.

  32. Lycia Diaz

    Bonjour Kevin.
    Lorsqu’on copie-colle des bouts de code, il arrive parfois que les apostrophes simples (‘) se transforment et altèrent le code. Les erreurs peuvent provenir de là. Il faut qu’elles soient « droites » et non « penchées ». Je ne suis certainement pas très claire dans mes explications. J’espère que depuis le temps, vous avez trouvé…

  33. Lycia Diaz

    Bonjour Jean Michel. J’ai enfin eu le temps de regarder votre site et ces histoires d’icônes déformés. Effectivement, j’ai bien vu… Cela ne vient pas de Divi. Je crois que c’est une histoire d’encodage de votre base de données. Je ne voudrais pas dire de bêtises… Mais j’ai déjà vu ce genre de soucis. Selon l’hébergeur que vous utilisez, il pourra peut-être vous en dire plus. Sinon, posez la question sur un groupe Facebook dédié à WordPress. Postez une capture d’écran et voyez ce qu’ils vous répondent.
    J’espère vous avoir aiguillé. A moins que vous aviez déjà résolu le problème ?
    A bientôt
    Lycia

  34. Jean-Michel

    Bonsoir Lycia,
    merci d’y avoir jeter un coup d’oeil.
    Je vais suivre votre conseil car ce n’est effectivement pas resolu. Je vais aussi voir du cote de l’encodage, « utf8mb4_unicode_ci » peut-etre que juste là… 🙂
    Meilleurs voeux.

  35. Lycia Diaz

    Bonne année à vous également !

  36. iDevelopper

    Il faut copier le fichier social_icons.php dans le dossier /includes du thème enfant et non dans sa racine. Ainsi, pas besoin de modifier footer.php, qui peut être mis à jour de plus par elegants theme…

  37. Lycia Diaz

    Hello Patrick. Effectivement, ta méthode était celle que je présentais dans la première version de cet article mais le dossier INCLUDES contient également de nombreux fichiers qui peuvent eux aussi faire l’objet d’une MAJ de la part de Elegant Theme. Je pense alors que remplacer un seul fichier en cas de MAJ (le footer) est peut-être plus facile…

  38. iDevelopper

    Hi Lycia, Je ne comprend pas ta réponse. Ne remplacer aucun fichier est encore mieux que d’en remplacer un, non ? Donc pas besoin de copier et modifier footer.php ni à header.php d’ailleurs (pour avoir les icônes dans le header aussi). On pourrait également préciser quelque part que les icônes des réseaux sociaux ne s’affichent pas avec Google Chrome si AdBlock est activé sur le site.

  39. Lycia Diaz

    Merci !

  40. Lycia Diaz

    Merci Patrick pour l’astuce AdBlock… je ne savais car je n’utilise pas de AdBlock 😉

  41. Enterprendre 3.0

    Merci pour cet article très utiles et très bien détaillé 🙂

  42. Olivier.LM

    Merci Lycia pour ce tuto très bien réalisé 😉

  43. Lycia Diaz

    Super Olivier, ça fait plaisir un peu d’encouragement 😉

  44. Valentin Lanier

    Merci Lycia pour ce tuto, fonctionne très bien ! Je voulais savoir s’il y avait un moyen pour que les icones se placent au dessus des crédits, comme sur tablette ou mobile, mais aussi sur un ecran plus large? J’ai essayé de bidouiller deux trois trucs mais sans succès, donc si tu as une piste 🙂
    A bientôt !

  45. Lycia Diaz

    Salut Valentin, tu peux faire ça si tu utilises le Thème Builder et que tu ajoutes un module de réseaux sociaux

  46. Elodie

    Bonjour,

    Merci pour ces articles très complets. A la place d’icônes, je souhaiterai simplement mettre du texte (visuellement que mon site affiche « Instagram » « Twitter » et « Pinterest » et non les icônes de ces reseaux sociaux). Comment puis-je faire cela ?

    Merci beaucoup pour votre aide.

  47. Lycia Diaz

    Salut Elodie, il te suffit d’utiliser les crédits en pied de page : Apparence > Personnaliser > Pieds de Page > Barre inférieure > Tu ajoutes ton texte et tes liens ici (en HTML) dans le champ « Modifier les crédits de pied de page ».

  48. Sabine

    Génial merci beaucoup!

  49. Lycia Diaz

    Merci Sabine 😉

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Shares
Share This