Grow your CSS skills. Land your dream job.

Social Icons the CORRECT way

  • # November 4, 2013 at 10:14 am

    Hi,

    I have a wordpress website (tampering on wamp on my computer for now) and would like to add social icons to the nav but there are so many different ways out there to do it, is there a ‘correct’ way?

    If so could you please list the steps as I am a newb at this but do get the idea on what to do. So far, I have tried going into dashboard and then menu, adding lets say Facebook as a new menu, then dropping down the top and ticking css, then entering in social-fb and done the same with twitter. But thats as far as I can get and I have managed to add in the one image of facebook so far but as it is a black background on the nav and the image is a black circle with white ‘F’ , it displays as a black F so you can hardly see it.

    Don’t know where I am going wrong but sure you good folk will know ;-)

    If that was is not suggested please let me know and then let me know code to enter into wp-head and css.

    Geratly appreciated ;-)

    Thanks

    # November 4, 2013 at 12:06 pm

    No, there’s not “one correct way.” In your case, the simplest approach would probably be to find a plugin that does it—I’m not a WP user, so I couldn’t say which; but I’m sure you’d be able to find at least a few to choose from.

    # November 4, 2013 at 12:40 pm

    Thanks for the feedback Traq.

    I would love to learn and know basics and do not want to rely on plugins so am looking for a recommended way.

    Thanks

    # November 4, 2013 at 1:34 pm

    You’ll have to be a bit more specific on what you want to accomplish. If you want to use the default, “out of the box” navigation menu setup, you’ll be limited by the markup WP produces for your nav.

    If you want to dig in a bit more, you can create a new nav menu walker to feed to wp_nav_menu for a truly custom menu setup.

    # November 4, 2013 at 3:59 pm

    Hi,

    I already have a menu setup in wordpress (Horizontal), I want horizontal social icons on the same level as the menu on the right hand side of the page and want to achieve this using html/css but am unsure how to.
    I know to upload the images to the correct images folder but its implicating the code I am stuck on.

    I hope this makes sense?

    Thanks

    # November 7, 2013 at 3:47 am

    We have options in Widgets Column just try it..

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".