Easily Add Social Media Icon Links to Your Website with HTML & CSS

In this video I'll be showing you how to add icon links for sites like Facebook, Twitter, Instagram, Snapchat etc. on your own website. This is perfect for small business website designs, portfolios and so on.
Ionicons Reference:
ICON SEARCH - ionic.io/ionicons
USAGE - ionic.io/ionic...
🏫 My Udemy Courses - www.udemy.com/...
🎨 Download my VS Code theme - marketplace.vi...
💜 Join my Discord Server - / discord
🐦 Find me on Twitter - / dcodeyt
💸 Support me on Patreon - / dcode
📰 Follow me on DEV Community - dev.to/dcodeyt
📹 Join this channel to get access to perks - / @dcode-software
If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!
#dcode #html #css

[@esasrl3384]

You are a life saver mate! Greetings from Italy 🇮🇹

[@sanskrutiswami8276]

I was recently given an assignment to create a login form and I had no idea how to add the social media icons.
Thank you for the explanation! It was really helpful.

[@swapnilbauskar3485]

Broooo , all concepts you explained to me in the video i understood them crystal clear. I had been watching other YTubers for this & all of them flopped around the concept. You got straight to the concept & made it easy to understand at the same time making it easy to execute. Please do more videos like this of other languages as well. I subbed. Love ya !!!

[@kenduxbury7122]

Beginning web dev here...THANK YOU for this vid!!! Helped tons.

[@Mercinity]

how do you change the logo size and location? I want the logo to be along the bottom of the page

[@alskopim]

Is there a way to change the size of the icon?

[@fabricioteidy]

On css its just font-size

[@user-ho7fg7bm3b]

This was very helpful brother, straight to the point. thanks once again.

[@btgdiablo2030]

how do i change the size of the icons? I saw one comment below but I can't figure it out.

[@damanackal]

ion-icon {
height: 50px;
width: 50px;
}
You change change the height and width like this in your .css file

[@daranithin6157]

@@damanackal thanks a lot !! saved my time

[@bettertosleep9949]

For some reason that didn’t work for me

[@Laughteragency]

​@@bettertosleep9949
Make sure you put the dot sign before the tag up

[@takimoussa7]

Try font-size

[@Kreative_kelly]

Total lifesaver! Thank you for the easy explanation!

[@precious8326]

omg, thank u so much , I searched so hard online and was so confused your video answered every question! SO SIMPLE will be subscribing ; )

[@An-yh2bl]

Thank you! :) Great tutorial, I had problems in a project with the underline at the social icons and I couldn´t make it disappear, now I know how to make that too! :)

[@lewkez]

this is one of the best tutorials i've followed so far! thank you so much :), definitely deserverd a sub

[@sayori3939]

Thanks this is the best website for icons I've seen so far, they're very easily customizable, check the usage page, you can change colors, size

[@tessr6238]

Clear, concise instructions that worked a treat - thanks!

[@dcode-software]

You're welcome

[@OujiDDumb]

how do i make it big!!! height and width not working men

[@edwinmaina4real]

Your video and sound are of good quality. Good job .
Thank you for the video.

[@JoanaSilva-fk3ld]

Hi Dom. Thanks for this helpful video! Is there any way to change the icons alt text on hover? From "Logo Twitter" to just "Twitter", for example.

[@work9167]

Beautiful. Nice and simple explanation

[@patriciakulemeka2433]

this really helped me i was struggling to put icons thanks

[@erikdinos1229]

thanks! so easy to do,if you get the easy instructions!

[@fidelisomoni7537]

I could give you a hug for this, Thank you soo so much man!!!

[@dcode-software]

No problem 😊 glad I could help you.

[@catcollector9495]

This was super helpful, thank you! Is there by any chance a way to size up the icon once you've added it in?

[@olanrewajuarilomo]

Yes, simply add a "font-size" property to your class. E.g .icon{
font-size: 50px;
}

[@shehryarkhan3646]

You can also use this property:
and u can use the CSS property like:
ion-icon {
font-size: 30px;
}

[@maxencejouane2337]

@@shehryarkhan3646 thank you so much i was struggling for 1 hour trying to change the size and saw your comment and tried it out. Thank you!!!!!

[@shehryarkhan3646]

@@maxencejouane2337 You are Welcome, bro! 😊

[@sherazkhan6522]

@@shehryarkhan3646 thnx alot

[@kennjenkins5645]

Sir, You are a very good instructor thank you.

[@sridharreddy5714]

It was a great video sir i have seen in youtube regarding this topic i have a doubt sir i am new to html and css in this video you shown how to link the social media icons with our links but who ever clicked the link they can access our account right but i want to add my social media account to just to read it not for writting shall i know how to do that

[@kidtukwan]

Thanks buddy! I link your explanation 😉

[@nanchinsunday6136]

Thank you your video helped me 😂😂

[@jazleen5743]

works, but it only appears on microsoft edge and firefox and not on google chrome?

[@phillipcroukamp1825]

How can I make the link open in the mobile app for socal media when someone opens the link on their phone?

[@bluecollarscrooge3981]

like the video but having problem positioning icons. using margins and padding (floating to the right but dont want the far right) and having issues.otherwise good

[@CodingGeeek]

Hi buddy! I hope you're doing great. which font-family you're using in vscode?

[@gomango99]

That's great! Is there a way to have a short caption underneath it?

[@aatikaati1038]

How to change the size and give space in icons....i tried all properties about size but no work working

[@fieryninja2374]

Best tutorial really helped

[@DineshRawat10]

Thanks a lot 😍✨

[@mightycoderx]

I'll use ionicons next time I need icons instead of font awesome which is more of an hassle

[@prenzgamer2001]

Thank you so much! vey helpful...

[@whyjamesisacommonname]

thanks, i learned something :)

[@Local_Nerd]

Thanks!

[@prasannasilva7754]

absolutely handy! thanks

[@warlordxone07]

Thanks a lot bhai love u ❤️❤️❤️

[@ourspolair7118]

I have a syntax error : is not recongnized, how to fix it?

[@SpeedySurprises]

Thanks. You are helpful.

[@simrandubey2596]

Thank YOu for the video it help allot

[@espectrograma]

Hi Dom. This video was very helpful for me, to drag followers to my social media through my website. On the other hand, I'd like to encourage the visitors of some pages of my website to share those pages with their friends. To do that, I suppose I might replace the address of my social media (facebook, twitter) for some other facebook and twitter address so that the visitors was directed to their own social media. Do you have a video on that matter? Thank you very much. Edgar, from South Brazil.

[@tom_barongo]

I wish you were answered, I could have learned too. Could you please help me on the same matter if already knowledgeable about it?

[@espectrograma]

@@tom_barongo Unfortunately I didn't get through that issue so far.

[@kiroka9129]

您好，我想问一下，如果我想添加的社交图标不在网站上，例如行，我应该如何修改它

[@eliadisousa]

In a Blogger gadget the default color of icons is gray and the hover orange.

[@SvetaSveta-ms4hi]

Thanks a bunch! 😍

[@dilkihansapani9145]

Thank you buddy😍

[@OVERSKETCH]

my concern was that the icons seemed to be too small in my website when i tried to code it in, although i did put some margins it did work but the size cant seemed to be working

[@anandmahamuni5442]

Same w3s has similar library but can't change the size at all

[@sayaankhan3484]

You would think it would be this easy and simple.

[@ibrahim_011]

really helpful

[@appiahfred2275]

Gracias amigo ❤👍👍👍Thanks

[@RianY2K]

Wow i dont know this Icon service is exist. This become alternative from font awesome.

[@guyrowes1867]

Very nice man

[@jibanpradeepchand9102]

Thank you 😊

[@mattheworton9803]

Does this still work I'm using sublime text and I've entered the code but the icons not showing up on my html?

[@Woodcourtstudio]

Thank you so much

[@giovannimichel5506]

Thank you for the intel.

[@lol-hz9mc]

Thank you

[@cherrym3202]

Hiii, this didn't work for me:( I had to make a "website" for a performance task in our school. I'm not sure what i did wrong but the icon itself wasn't showing up when i refresh the site.

[@cherrym3202]

is there something else i need to know or learn before trying to do this?

[@SimplyALord3542]

you should prob write ur code here so people can look for an error

[@CreativeTutorialsWeb]

Impressive

[@alexisbaffoe1397]

What about calling, whatsapp and email?

[@aquasplash545]

thanks for this vid. I got an alternative to FontAwesome.

[@havicff3992]

thanks broo....

[@fannyfranzen7561]

Thanks

[@3bdostation476]

how i can move him and make it biger????

[@vroger7959]

How to put this logo on the center of my page ?

[@akbarkarshiev2983]

thanks broo

[@Imk4r4n]

0 dislike bro : )

[@thatdumdumguy1548]

hey just asking, what software are you using to do html?

[@dcode-software]

VS Code

[@thatdumdumguy1548]

@@dcode-software hey do you also know how to change the color of the icon?

[@maprajwol950]

How do i adjust its size?

[@djordjestankovic7484]

thanks

[@MalcolmTheRealtor]

How do I align them vertically?

[@aatikaati1038]

Flex-direction : col;

[@ecommerceproject6569]

may i have copy of this html code pls?

[@pepidge3371]

why doesnt it have tiktok

[@bea027]

won't work on mine :(

[@OujiDDumb]

how do i move it

[@garbaty2000]

position: absolute:
left:
top:
bottom:
right:
pair of these (ex. top, left) is enough

[@yatheeshgowda6191]

Hii guys my name is Document Object Model (DOM) You are born for the web DOM

[@divanshverma3466]

How to change logo size please reply

[@divanshverma3466]

@Nate 338 thx

[@lisasievers8059]

you should clearly say PAY FOR ICONS!!!

[@nikki.cad0s]

I am so confused, i did everything in the video but nothing worked. It keeps saying it refused to connect.

[@Amal-xq1bm]

thANK YOU

[@codetherapytt978]

Thanks

[@dcode-software]

You're welcome!

[@ocean.w.a.v.e.s]

thank you!

[@mumbaikachallenge5526]

Thank you❤️