How To Add More Social Media & Brand Icons To The Divi Social Follow Module

[@siinxx7656]

Bro, you're killing it! Almost for every new thing I'm looking up to implement in my work flow there's a tut vid from you. I already suscribed to your course on making divi responsive, I hope to have the time soon to take a look over it.

[@PeeAyeCreative]

Hey there, that's really cool that you are finding the solutions you need! If there is ever anything you need but can't find just let me know, always open to tutorial ideas!

[@siinxx7656]

@@PeeAyeCreative Thank you very much. I saw on your website that you are friendly, and yes indeed. :D Actually I've struggling to find a way around hidden drop down menus, I get how to make that in principle, but I'm looking for a function that when there's a second button with the same function, while opening a hidden section through a second button, the first one closes. I'm not sure if I'm being clear enough. Please tell me if you'll be interested about this matter so I can explain it further. :D

[@khalidfrank7816]

i know Im asking randomly but does anybody know a trick to log back into an Instagram account?? I was stupid forgot my account password. I would love any help you can give me

[@abqadkhan]

I was waiting for this thanks.

[@PeeAyeCreative]

You're welcome!

[@MehdiAnvarian]

Great tutorial, thanks! Unfortunately this does not work on the latest version of Divi. Do you have a similar fix for the new X(twitter) icon? I believe Font Awesome 6 has the new icon.

[@PeeAyeCreative]

The next video here will be a tutorial on that, stay subscribed!👍

[@martinmerida8965]

How do you change the default alt text hover that says "Follow on "X""? Because I've followed your steps, however if it hovers it still reads "Follow on MySpace" for when I've used Myspace as a replacement for Spotify. How do I have that default change to "Follow on Spotify"?

[@trijatilayup4830]

Thank you maan!!

[@PeeAyeCreative]

You're welcome!

[@PeeAyeCreative]

You're welcome!

[@Raydfernandez]

YOU ARE AWESOME!!!!

[@chiefkibitzer9419]

2:13 Nelson's chuckle over the absurdity of adding an obsolete Myspace icon:)

[@PeeAyeCreative]

Haha :)

[@pavelg.5788]

Thank you! Also it would help if you had link to blog post in the description

[@PeeAyeCreative]

You're welcome! Yes, I always do...

[@jagonly]

Thanks for the video.

[@PeeAyeCreative]

You are welcome!

[@tonychopper4114]

Nice tutorial. How do you make the link open to new window or tab. Right now it open the link to the same window.

[@PeeAyeCreative]

That's a standard setting in Divi, right?

[@tonychopper4114]

@@PeeAyeCreative using that module looks like it does not have the option to open the link to new window. I have to add a javascript function to target a class child to add the target="_blank" attribute.

[@tonyboylevrai7327]

Hello, thanks for your tutorial, i try to change google + by Tripadvisor but i watch F262 not the Tripadvisor logo. Can u help me please.

[@PeeAyeCreative]

Make sure to read the post as well, some icons are "Brand" icons and some are other things which need to be changed in the snippet. That all depends on Font Awesome, you can find that info when you view the icon on their website.

[@tonyboylevrai7327]

@@PeeAyeCreative i followed your tutorial...

[@MotionStudio69]

Awesome explanation and the helpful article, kindly give the article link in the description, I have followed your tutorial and it working perfectly, but if I hover my mouse to the unwanted icon it's said his original name, like follow on youtube, is that any way we can disable that text with hover? Thanks

[@PeeAyeCreative]

I'm glad you like it. The link is in the description, I do that for every video. In the written tutorial we have the answer to your question and also in the comments there.

[@MotionStudio69]

@@PeeAyeCreative many thanks i will check the written tutorial

[@FelixFischerOfficial]

Hey! Great video, wonderful information! I had also to install the font aweome plugin, because the icon (xing) was shown as a sqaure. The Plugin will kill the problem, if another one has the same problem. But I have a question: How can I unsee or edit the shown information text "Follow us on [...]", which is preset by the divi social media tool? You know, I now have a Xing Icon, that says "Follow us on MySpace", if you hover over it lol. Please help and thank you again for your awesome work! :) EDIT: Thank you, I've read the #5 Point in your Blogpost now, so no additional help needed

[@christosmanolas1718]

Really great tutorial thank you so much, I have a question though, if we use Viber icon how do we link our account in order to send us a message. Thank you in advance

[@PeeAyeCreative]

You can set the URL link in the module.

[@raveblc3812]

Thanks for this

[@PeeAyeCreative]

You are welcome!

[@bannn9656]

Thanks for this!!!i have one question. how to edit the title when you hover the icons??? i would like to edit the "Follow on Pinterest" into "Follow on Yelp". thanks!

[@PeeAyeCreative]

Sure, I have this in the blog post!

[@minaeshak5489]

it's a really awesome tutorial, I just have a small issue when I add an email icon from font awesome it doesn't appear next to the other social icon any advice?

[@PeeAyeCreative]

Hi Mina, I would need more context to help with anything.

[@minaeshak5489]

There is any option to change the Facebook icon to the Email icon or Call phone icon? I did the same method for how to add more social media but the Email icon or phone icon Doesn't Appear.

[@MrWayra11]

Hi ! First of all, thank for your help, it's really helpful. I've tried to follow the one but it doesn't work, the icon doesn't show up and I've tried with practacally all the CSS snippets

[@PeeAyeCreative]

Can you check to be sure you are using the correct Font Awesome terminology? Some icons are "brands" and some are "solid" etc and that's probably the issue.

[@MrWayra11]

@@PeeAyeCreative Hi, I'm using the correct terminology. And i tried with differents icons found on Font Awesome. Still doesn't work. I'm using a child theme but I don't think it's related

[@michaelkarpienski280]

Thank you so much for the video, I was hoping this could work in the custom header on divi builder, Would you kindly help me with this?

[@PeeAyeCreative]

Hi Michael, I'm not sure what you mean because this certainly would work great in the Divi Theme Builder header template.

[@johncallanan5999]

I can't get the Font Awesome icon to display. Trying to replace the Dribble icon with an email icon \f0e0. I tried changing the font-family to "Font Awesome 5 Pro" (I have a paid account) and still nothing. Any ideas? The FA script is in the Integration, but it's acting as though it has not been integrated.

[@johncallanan5999]

Well, it just suddenly showed up. Maybe there was an issue with my FA accout/kit?

[@PeeAyeCreative]

I'm not sure, maybe just cache on your end!

[@recomposemedia4603]

I'm attempting to do something similiar and add a font awesome icon into my menu bar. Ive given the menu link a class of "menu-sell". What would be the best way to add one of these icons somewhere, where you aren't replacing one of the default icons?

[@recomposemedia4603]

This is the code I tried, but it doesn't seem to be working.. .menu-sell:before { font-family: "Font Awesome 5 Brands"!important; content: "\f4d9"; }

[@recomposemedia4603]

Got it to work! I had to change font-family to "Font Awesome 5 Free"

[@PeeAyeCreative]

Glad you got this, I was going to say, usually it has something to do with the new Font Awesome being picky about terminology. I plan to do a tutorial on this as well.

[@abdallahelchaarani8989]

awesome thank you. how can i add whatsapp icon to the top navigation bar?

[@PeeAyeCreative]

This tutorial and the Theme Builder!

[@david-wall]

Good tutorial - thanks. I'd like to retain all my social tooltips, but only modify the incorrect ones that I've used from Font Awesome. The instructions in your blog just wipe ALL the tooltips out. Not too helpful really, as I imagine the average user wouldn't really recognise (for example) what a 'Bandcamp' icon was without the tooltip. Any ideas?

[@PeeAyeCreative]

Sorry I'm not really sure

[@david-wall]

@@PeeAyeCreative never mind - still a useful tutorial - thank you! I asked the DIVI team for advice and they just referred me to a coding agency!

[@christianhimmer]

Duuuudeee ... really ... thanks ....

[@PeeAyeCreative]

You're welcome! This is pretty cool isn't it!

[@Yondainc]

Do you have the code for Rumble

[@andreds1469]

Where are the social media icon snippets you mentioned Please

[@PeeAyeCreative]

I always have a written blog post linked in the description. There is no way to share snippets on KZbin.

[@sebastianmedrano6877]

Thanks

[@PeeAyeCreative]

You're welcome!

[@melanieluxy]

the code doesn't work for me. The icon is not showing, there is just a square shape, doesn't matter the code I put. What can I do?

[@cesarmejias9008]

i have the same problem

[@amyleigh4939]

Hey, is it possible to do this with google my business??

[@PeeAyeCreative]

I don't see that icon on Font Awesome...unfortunately.

[@spandannahata]

hey can you send me integration code for plugin bcz i tried to copy paste but its not working it just says the word f232

[@PeeAyeCreative]

You would need to make sure Font Awesome is integrated of course, so go to their website or install their plugin.

[@mrxXxkink]

the snapchat one does not have the black stroke

[@scalptradingstocks]

Thank you! But whet I put f232 (for whatsapp) I see just square :-/

[@PeeAyeCreative]

Were you able to get the other icons to work? Or just this one. If others then it is a problem with the Font Awesome integration.

[@scalptradingstocks]

@@PeeAyeCreative other doesnt work as well, so I will try change the font awesome and i will let you know.

[@soniamokhtari7010]

@@scalptradingstocks same for me :( any solution ? nothing works...

[@JohnChvatalGSTV]

Is there a way to add an icon file that that isn’t available in Font Awesome to the social media follow module?

[@PeeAyeCreative]

Hi John, you should be able to add any icon or image using this method, just place it in the content: ""; You could even use ETModules icon font (the built-in ones) and just change the font family.

[@JohnChvatalGSTV]

Pee-Aye Creative thanks! I’ll have to play with it. Do you think I could add an icon via a media library URL? Would an SVG file uploaded to the media library work?

[@recomposemedia4603]

@@JohnChvatalGSTV Was just wondering the same thing. Have some custom designed icons I'd like to be able to use this way in spots where you cant use the image module.

[@JohnChvatalGSTV]

ReCompose Media I haven’t tried it yet. It’d be great if @Pee-Aye Creative could test it out and do a video if he finds a way...

[@recomposemedia4603]

@@JohnChvatalGSTV I figured out how to add an image but am still trying to figure out the css to resize it. www.w3schools.com/cssref/tryit.asp?filename=trycss_content_url

[@gabiajando]

How can i add a share button instead. Coz in divi monarch there is NO share to whatsapp or telegram :(

[@PeeAyeCreative]

Hi there, usually with sharing plugins they have a special url that they pull in to create the popup thing, so that would not be possible with this module.

[@BellaKT87]

My icon is still appearing blank. I could really use some help on this one

[@PeeAyeCreative]

Most likely due to the wrong Font Awesome font family terminology. It is different for brands, for example, than others. Font Awesome 5 Free, Font Awesome 5 Brands, etc it needs to match what's on their website for that icon.

[@denisporretti1329]

@@PeeAyeCreative Hi Nelson. I tried to use the font awesome icons and I suceeded with Brands pics, but I'm facing an issue with other icons such as the classic "phone" pic, which is not under the brands group. The icon just doesn't show up

[@yairsoto6423]

How can I add a png image?

[@PeeAyeCreative]

I haven't tried it with the social follow module but it would require you to copy the url and add that as the "content" like content: url(your-url-here.png);

[@anti6454]

What Kind of group is phone icon, its not Free and not Brands....

[@anti6454]

It doest work with Solid Icons, but why?

[@PeeAyeCreative]

You can check in Font Awesome, it always says. If solid isn't working, add font-weight: 900;

[@anti6454]

@@PeeAyeCreative thank you so much

[@BellaKT87]

I could not get this to work

[@PeeAyeCreative]

What did you try? 🙂 Do you want help?

[@BellaKT87]

Pee-Aye Creative yes thank you. I wanted to add a simple envelope as the icon and it was coming up blank.

[@BellaKT87]

@@PeeAyeCreative the icon for me shows on the back end but not showing on the front end. Any suggestions?

[@PeeAyeCreative]

@@BellaKT87 Hmm, that is odd. Can you share a link?

[@dsan6274]

this is no longer working :/ but cool video.

[@PeeAyeCreative]

Nothing has changed with Divi or the tutorial, it should work fine.

[@ArdiWahyudi]

great tutorial, but if you hoover your mouse on G+, there is hoover text : follow on google+, and it will look weird

[@PeeAyeCreative]

Please check the blog post for information on this.

[@ArdiWahyudi]

@@PeeAyeCreative I've read your blog. and problem solved. Thank you, you save my life