Add Social Media Icons to WordPress Menu (2019)


How to EASILY add social media icons to the navigation menu on your WordPress website.

In this tutorial, I’m going to walk you through how to use free Font Awesome icons to add social media links as menu items in WordPress.

Font Awesome header code:

Font Awesome sizing guide:

Header and Footer WordPress plugin:

► FREE CHECKLIST — The Ultimate Blog Post SEO Checklist:


Say hi on social media:


View More: Cuocdoidanghien Social Media


  1. Thank you, Mariah! But how actually to connect those icons with my social media, do you have a video on that? I placed the icons on my website as you described but they don't bring people to my accounts. Appreciate your help very much!

  2. Where did you get code to put in header/footer to tell "code" to show font awesome for icon from server. I download plug in.

  3. Now we need a video on how to speed up our websites. Font awesome is slowing me a down. I'm trying to figure out how to use a cdn but it seems a little complicated so far

  4. The first link with header code doesn't load. I can't find that code anywhere on that site. Your video shows there is a link "how to use" in the menu of that site (awesomefonts). Now there is no such link visible. Does it mean I don't need anymore to paste that line of code in the header section? Thanks!

  5. Golden. Im a beginner and I got this within 5 mins. I almost even added the instagram color gradient to the button but couldnt figure out the css that i needed to modify from a template.

  6. Thank you for the video BUT I am a beginner. This was done way way way to fast. Even when I stopped and replayed it over and over. I have watched this whole video over 5 times and I still don't get it. Can you suggest another person that goes slow, Thank you

  7. This was very helpful. I do have a question though. With the help of your tutorial I was able to get the social media icons to appear in the navigation menu. However, my share icons (Facebook, Pinterest, Twitter, etc) disappeared from the bottom of my blog post. I can click on where the icons are supposed to be and it'll redirect to the social media page, but the icons aren't visible. When I remove the Awesome Font link from the Header Script my share icons appear but then the social media icons in the navigation menu disappears.
    Is there anything I can do to resolve this issue? Tnx!

  8. I was about to bloat my site with WP Mega Menu just to do this, and you came with this and saved me. thanks!

  9. This video was perfect! To the point and well explained! Making a WordPress site for school and this was a big help. Thank you!

  10. How to reduce the gap between them and how to make more beautiful… Pls tell me… If already done then pls provide me the link of that video…

  11. Hi Mariah, first of all thank for sharing your knowledge. It works perfectly but now my other icons on my site have a square shape, icons that I used in the mission, vision and values.
    How can I put everything in order?


Please enter your comment!
Please enter your name here