47 Responses

  1. James
    James Published |

    Nice, simple yet effective!

  2. Sami Keijonen
    Sami Keijonen Published |

    You make it sound so easy and simple. Well basically it is:)

  3. Joen A.
    Joen A. Published |

    This makes me happy, yay GPL!

    One quick note, though — I notice you’re setting the icons to a 1.125rem font-size. Depending on your surrounding CSS, that’s likely going to blur the icons more than necessary. The icons, when shown at 1x, were designed to be pixel-precise at a 16x16px grid (i.e. font-size 16px). A font size that’s just a little bit off, will cause the antialiasing to add blur. Here’s an example of the text icon, shown at 16px on the left, 17px on the right:


  4. Wisely Woven
    Wisely Woven Published |

    Awesome! Thanks for sharing!

  5. Social navigation menu with Genericons : Post Status
  6. Jamie Thompson
    Jamie Thompson Published |

    This is good stuff!

  7. James
    James Published |

    I noticed your Dashboard has an “almost flat” design – what Dashboard theme are you using?

    1. RJ Webb
      RJ Webb Published |

      Looks like he’s using the MP6 plugin. Great little thing.. can’t wait for it to be a part of core. =)

  8. Silvan Hagen
    Silvan Hagen Published |

    Thanks for sharing this great little piece of code Justin. Our designers and clients will love it a lot, because it makes social links so damn easy.

  9. Mika E. (Ipstenu)
    Mika E. (Ipstenu) Published |

    I need to link back to this from my plugin for Genericons.

    One alternative, I’ve been using a custom class for my menu items: ‘social-icons’

    That lets me style with li.social-buttons a::before instead of defining #menu-whatever, which has the added benefit of being fancy easy for mixed media menus, where I may go with icons for some of the items.

  10. Damon Cook
    Damon Cook Published |

    One could use the following for a clickable mobile phone number:
    1. put this in your WP Menu for URL: tel://1-555-555-5555
    2. use this CSS to style:

    #menu-social li a[href^=tel]::before {
        	content: '\f437';
        	color: #55B0D4;
  11. Mathew Porter
    Mathew Porter Published |

    Great little tutorial guys, saves on alot of load that many plugins generally have in them.

  12. Chris Urbano
    Chris Urbano Published |

    Thank you for this!! It’s what I’ve been searching for for days! I just have one quick question. Is there a way to get the links to open in a new window? I tried everything and I cannot get that to work…

  13. Chris Urbano
    Chris Urbano Published |

    One final question…. I’m not sure if I’m going about this the correct way, but I am trying to get a hover effect using the “::before” & “::after” elements and I’m struggling. My goal is to have the color of each of the icons a faded version of the one in your supplied example and as the mouse hovers over each they become fully colored as you’ve done. Any suggestions?
    Sorry for the stupid questions, but you’re the only one who’s done what I’ve been trying to and I am just so close having this the way I want!! 🙂


    1. David Williamson
      David Williamson Published |


      I was trying to figure out the same thing and figured it out. Put the hover in between the two colons, so it should be “a:hover:before” or “a:hover:after”.

  14. Technique For Creating Portable Social Menus In WordPress Themes
  15. A New Genesis Social Icon Menu - The Web Princess
  16. Fred
    Fred Published |

    So what if I wanted to add these social icons to a current menu that I already have instead of a separate one? What code would I need to change? This is good stuff by the way.

  17. WP-Forge Updated to v5.1.0 - ThemeAwesome.com
  18. E. Pit-Larson
    E. Pit-Larson Published |

    Excellent. Just what I was looking for. Most plugins only allow for one link per social network. This allows multiple links of your choice. I had done them earlier as a text widget, but this is much better.

  19. Swimbi
    Swimbi Published |

    Beautifull thanks for sharing. Such an easy solution.

  20. Ricky Buchanan
    Ricky Buchanan Published |

    This is awesome and so easy!

    I added two to your list, for my own purposes:

    menu-social li a[href*="/feed"]::before {
    content: '\f413';
    color:   #ff6600;
    menu-social li a[href*="subscribe"]::before {
    content: '\f410';
    color:   #34ad00;

    The email one just redirects to a page with the subscription form, which happens to be named ‘subscribe’. That’s probably suboptimal but it’s easy to do, at least!

  21. Tim Nicholson
    Tim Nicholson Published |

    I’ve got a theme on WordPress.org (called “link”) that implements a very similar solution. You build the “social” menu like this, but my theme has a way to add font-awesome icons to any menu. I see now that Genericons are built into WordPress core. So clearly that is the way to go for consistency across all themes.

    So my questions are:

    Has this been widely adopted by any theme shops and/or the general WordPress community yet?

    Will you be issuing a “Part 3” that refactors the code to use the built-in WordPress core Genericons?

  22. Tomas M.
    Tomas M. Published |

    Hi, Justin,

    I plan to implement your approach in my theme and I have a question. Let’s say I want theme users to pick their own place for this menu, like any text widget. What would be the best (and safe) method to add this menu to a text widget, or perhaps as a special widget?

    Would it be same:

    <?php get_template_part( 'menu', 'social' ); ?>

    Thank you!

    1. Tomas M.
      Tomas M. Published |

      Simple and brilliant 😀

      Thank you!

    2. Tomas M.
      Tomas M. Published |

      Justin, everything worked fine except one – when using default widget, I could not find a way to make it use the menu-social.php template. Without this menu looses its accessibility.

      Is there any way to make WP use this template, when called from the default NAV widget?

      Thanks a lot!

  23. Scott
    Scott Published |

    Works great, including adding the bits in the comments. But I have a small issue, how can I add “Follow Us:” to come before the icons?

    1. Aaron Snowberger
      Aaron Snowberger Published |

      You could use the ::after pseudo-selector to do that. Use ::before for your text and use ::after for your icon like this:

      .menu-social li a[href*=”twitter.com”]::before { content: ‘Follow Us: ‘; }

      .menu-social li a[href*=”twitter.com”]::after { content: ‘\f202’; }

      Then if you need to re-position them, you can use padding and margin etc.

  24. Shekh farid
    Shekh farid Published |

    If I want to open this social menu links to a new tab, then what I should to do? Actually I want to know how I can add target=”_blank” attribute to link tag.

    1. Steffen Gammelgaard
      Steffen Gammelgaard Published |

      Go to Screen options under Appearance -> Menus and select “Link target”. Then you can click “Open window in a new tab” 😀

  25. Why I Like Font Icons
    Why I Like Font Icons at |
  26. Thème enfant Wordpress : Trucs et Astuces
  27. Jason Brummels
    Jason Brummels Published |

    I realize I’m a bit late to the party (since the post is a year old), but…Thank you!

  28. How to Enable Social Icons in the WordPress Theme Customizer | JKL WordPress
  29. Introducing the Gojoseon WordPress Theme for Key To Korean | Key to Korean
  30. Nachlese zum Thema Social Menus - WP Meetup Hamburg
  31. Michael Polsinelli
    Michael Polsinelli Published |

    Is there a way to have the “name” or “title” of the social site pop up when hovering over icon?

    1. Michael Polsinelli
      Michael Polsinelli Published |

      Ok, I figured it out. I needed to fill in the “Title Attribute” in the WordPress menu form.

      In the meantime, I put this in my child theme and it puts the words in the menu for each item, when you hover over the icon.

      .menu-social li a[href*=”facebook.com”]:hover:after {content: ” Facebook”; }

  32. Adding a social media navigation menu to WordPress with Socicons
  33. Contributing to Twenty Seventeen, the WordPress default theme
  34. Joe Daniels
    Joe Daniels Published |

    You wouldn’t believe how much this helped me after hours of pulling my hair out! Cheers Justin

Comments are closed.