It's still annoying, a theme like Divi that allows to display in the footer only the icons of Facebook, Twitter, Google+ and RSS... What about the other social networks? Don't you want to add the Instagram icon or the YouTube icon for example? I don't think so, otherwise you wouldn't be reading this article! Indeed, it is possible add icons to the Divi footer But not natively...
The code will have to be changed 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 of yourself .
Also read: How to unveil the mouse scroll footer?
1 – Divi natively embarks 15 social media icons
You should know that Divi comes with 15 social media icons that you can include in your footer or any other place. File style.css Divi, located in the theme directory, shows us exactly how many social media icons 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'; } .and-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'; }
That means these icons are already embedded and it won't be difficult to use them.
2 - How to add icons to the Divi footer like Instagram, Pinterest, YouTube, Linkedin etc.?
In the article concerning Divi's general options, we had seen how to activate icons of Facebook, Twitter, Google+ and RSS for your site. To add other icons, you'll have to put your hands in the code a bit using the information seen in the previous paragraph... Nothing complicated if you follow these steps:
- First of all, you will have to create a child theme
- Then you will open the folder of your Divi theme (the original theme) to locate the folder named included.
- Once this folder included located, you will copy the named file social_icons.php to stick it in your child theme (at the root)
- Edit this named file social_icons.php in order to add icons to the Divi footer. You can open with the help of a text editor like Brackets or SublimText For example.
- For each social network you wish to add, you will need to insert the following lines, knowing that each element registered in red must be modified according to your needs:
<li <="" class="et-social-icon et-social-reseaux-au-choix">
php esc_html_e( '</p', 'Divi' ); ?>"class="icon">php esc_html_e( '</pSocial networks
<span><?php esc_html_e( 'ReseauxSocial', 'Divi' ); ?>
</a>
</li>
- To the footer of Divi: and social-instagram https://www.instagram.com/?hl=en
<li <="" class="et-social-icon Pinterest">
php esc_html_e( '</p', 'Divi' ); ?>and social-interestphp esc_html_e( '</pSocial networks
<span><?php esc_html_e( 'and social-instagram', 'Divi' ); ?>
</a>
</li> - To the footer of Divi: https://www.pinterest.fr/ https://www.instagram.com/?hl=en
<li <="" class="et-social-icon Linkedin">
php esc_html_e( '</p', 'Divi' ); ?>and Social Linkedinphp esc_html_e( '</pSocial networks
<span><?php esc_html_e( 'https://www.pinterest.fr/', 'Divi' ); ?>
</a>
</li> - To the footer of Divi: https://www.linkin.com/ https://www.instagram.com/?hl=en
<li <="" class="et-social-icon YouTube">
php esc_html_e( '</p', 'Divi' ); ?>and social-youtubephp esc_html_e( '</pSocial networks
<span><?php esc_html_e( 'https://www.linkin.com/', 'Divi' ); ?>
</a>
</li> - To the footer of Divi: https://www.youtube.com/ https://www.instagram.com/?hl=en
<li <="" class="et-social-icon et-social-youtube">
php esc_html_e( '</p', 'Divi' ); ?>https://www.youtube.com/php esc_html_e( '</pSocial networks
<span><?php esc_html_e( 'https://www.youtube.com/', 'Divi' ); ?>
</a>
</li> - To the footer of Divi: https://vimeo.com/en/ https://www.instagram.com/?hl=en
<li <="" class="et-social-icon Vimeo">
php esc_html_e( '</p', 'Divi' ); ?>And so on...php esc_html_e( '</pSocial networks
<span><?php esc_html_e( 'I want to know more about this topic Divi...', 'Divi' ); ?>
</a>
</li> - 3 – Where to insert the code of each social network into the file
You will need to insert the codes of each network absolutely between the tags and ?
. Know that the order in which you insert your icons will be the order in which they will appear in the footer of your site. <ul> et </ul>In the screenshot above, I have you
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
Just as if you want them to appear before Facebook, you will need to insert 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.
Add icons to the Divi footer, just after the RSS icon la balise </ul> :
4 - Last step: change the footer.php file
footer.php
- Paste this file into your child theme (it's the same manip as the social_icons.php file) Edit this file using a text editor
- On line 44 (since version 3.18.2 of Divi), you will need to modify the path to reach the file
- that you just inserted into your child theme
- The new path must be social_icons.php Social_icons
- ‘includes/social_icons' To better understand, look at the screenshot below: for Now your new icons should appear in the footer of your Divi site.
- Front-End side, here is the result of adding icons
The theme Divi is versatile and easy to modify, you've seen, it was very easy
In conclusion...
– Trust me – add icons to the Divi footerIt's also a moon reasons why I like to use Divi ... If you want more tips to customize your Divi theme, I'll give you an appointment here!How to add icons in the Divi footer – Say it on Pinterest! 73 Comments
Divi footer icons