21 Responses

  1. James
    James Published |

    Nice, simple yet effective!

    Reply
  2. Sami Keijonen
    Sami Keijonen Published |

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

    Reply
  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:

    http://f.cl.ly/items/0I2a0o1i3E0B2j1U010Z/comparison.png

    Reply
  4. Wisely Woven
    Wisely Woven Published |

    Awesome! Thanks for sharing!

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

    This is good stuff!

    Reply
  7. James
    James Published |

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

    Reply
    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. =)

      Reply
  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.

    Reply
  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.

    Reply
  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;
    }
    Reply
  11. Mathew Porter
    Mathew Porter Published |

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

    Reply
  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…

    Reply
  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!! :-)

    Chris

    Reply
    1. David Williamson
      David Williamson Published |

      Chris

      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”.

      Reply
  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.

    Reply
  17. WP-Forge Updated to v5.1.0 - ThemeAwesome.com

Leave a Reply

By submitting a comment here you grant this site a perpetual license to reproduce your words and name/Web site in attribution.

Please use your real name or a pseudonym (i.e., pen name, alias, nom de plume) when commenting. If you add your site name, company name, or something completely random, I'll likely change it to whatever I want.

css.php