So the other day a fellow designer asked me about adding new Social Media icons to the footer of Divi. He needed one that did not come pre-packaged with Divi’s font-icons.

Now he had already gone through my post “Adding Social Media Icons in Divi” which is where he made the request. My post covers adding icons that come pre-packed in Divi’s icon-font files but are not easily accessible through the admin panels.

So I was about to forward him to this great article by my friend Dan Mossop: “Adding Custom Icons to Divi” wherein he explains how to add your own image for use as an icon in the blurbs module.

But then i got this email from my fellow designer…

I was thinking about adding the custom icons (images) simply via HTML / php coding but if I do that I will lose cool hover effect. Maybe you know of a way to edit/add icon into their font, or another way to save vector/svg/font format for icons.

My initial response…

Homer-Simpson

Darn. Looks like I am going to have to hand this one off. Because the solution he needed involved incorporating additional icon-fonts that he could manipulate using CSS so that it would have the same effect as the existing social media icon-fonts.

But then while out for a drive a couple of hours later, I started thinking about possible solutions and by the time I got home, I was ready to take on the challenge. 1 hour later, the solution was found and the possibilities of future use now became endless.

So lets start with a quick tutorial on how to add 479 new icon-fonts into your WordPress library.

 

Font Awesome to the Rescue

Font Awesome gives you over 479 scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. You can see for your self here but before you download anything, I am going to show you a quick and easy way to use their icon-fonts without downloading anything.

font awesome

 

Add The Font To Your Website

There are several ways to add Font Awesome to your website. But I am going to show you the easiest way.

Start by opening up your header.php file in your child theme. If you don’t have one in there yet, just copy the header.php file from the Divi directory, to your Divi-child directory.

If you don’t have a child theme yet, follow these painless step by step instructions I wrote in an earlier post. How to set up a child theme. I would also keep a separate back-up of this file just in case.

Then simply paste the following code anywhere between <head>…</head> tages of your header.php.

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

That’s It! Now you can start doing some amazing things throughout your entire website. Just check out some of these great examples and how to use the Font Awesome icons.

http://fortawesome.github.io/Font-Awesome/examples/

Now let’s get back to the task at hand…

 

Add The New Social Media Icon to Your Footer

Next you will have to choose the icon you want to add. Keep in mind you have over 479 (and counting) to choose from. You can check out your options here.

In our example we choose to use the VKontakte icon. VKontakte is the largest Russian social networking service in Europe. So once we find it, click on it and it gives you the code to use like this example here.

vk

 

Now go ahead and open up your social_icons.php file in your child theme.

If you don’t have one there yet, you will have to make a new directory in your child theme called “includes” (wp-content>themes.Divi>includes). Then you will have to move a copy of the original file from the “includes” directory in the parent theme to the “includes” directory in the child theme.

Then insert the following code just before the closing </ul> tag.

 

<a target="_blank" href="https://www.linkedin.com/in/genoq">
<span><i class="et-social-icon fa fa-vk"></i></span></a>

 

The first line includes the url you want the visitor to go to so replace that with your own url.

The second line is the actual icon. You will replace the info between <span>…</span> with whatever code you get from Awesome font just like in the circled section in the image above.

*Just be sure to add et-social-icon before the icon font class as shown below. It will save you time and code.

et-social

Almost done!

Give It Some Style

Now it’s time to make it look like the rest of the icons in that footer. So now go to your style.css located in your child theme and open it up.

If you don’t have one in there yet, just copy the style.css file from the Divi directory to your Divi-child directory.

If you don’t have a child theme yet, follow these painless step by step instructions I wrote in an earlier post. How to set up a child theme. I would also keep a separate back-up of this file just in case.

Now add the following code into your stylesheet.

*Keep in mind the colors used are based on the default Divi color scheme. You can modify the color code as needed.

 

i.et-social-icon.fa.fa-vk {
font-size: 30px;
text-align: center;
display: inline-block;
position: relative;
transition: color 300ms ease 0s;
color: #666;
text-decoration: none;
padding-left: 20px;
}

 

So for each new icon you add, you will change the class used in the very first line. In this case it is the .fa.fa-vk that specifies the font Awesome icon we placed in the php file earlier. The rest will remain intact.

And now for the hover.

 

i.et-social-icon.fa.fa-vk:hover {color: #2EA3F2 !important;}

 

Same as above, just change out the color with your particular color scheme and the .fa.fa-vk with the specific icon class for each icon.

And this is the end result. Including all the hidden Divi Social Icons.

footer

You can also view a live demo here: http://montereydev.com/demos/dividemo01/

You can also find more great ways to use the Font Awesome Icons on your Divi Site here. I cant wait to start finding ways to use them on future projects.

 


Well that’s all for now. I hope you find this article useful.


STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest