How to place Social Media icons in the header bar

  • Author
    Posts
  • #1979642

    karenpavone
    Member

    Hi, I recently upgraded to the Traveler template. I want to put icon links to my facebook, twitter, instagram, and pintrest accounts in the header bar at the top of the page where they are readily visable to blog visitors. How do I do this?

    The blog I need help with is karenpavone.wordpress.com.

    #1979731

    karenpavone
    Member

    my the website I need help with is farministasfeast.com

    #1979882

    eurello
    Staff

    Hi there,

    The best way to do this would be to add each of your social media links as Custom Links in your Custom Menu:

    http://en.support.wordpress.com/menus/#adding-custom-links

    Then, you can upload the icons you’d like to use for each service to your Media Library, and then use CSS to replace the menu items with the icons. For example:

    li.page_item.page-item-2442 {
    	font-size: 0;
    }
    
    li.page_item.page-item-2442> a::before {
    	content: url('link to your image here');
    	position: relative;
    }

    And so on for each menu item. Does that make sense? If you need help, go ahead and add your social media links to your menu as custom links, and upload the icons you want to use for them. I’ll be happy to help you out.

    #1979917

    karenpavone
    Member

    Hi Eurello,

    So I played around a bit and got my FB, Twitter, & Pinterest links to appear in the top header!! Thanks!! But I can’t figure out how to put a “Follow this Blog” Button in the top header along with them. Can you give me a code I can use to insert this feature in the top header bar as well? @farministasfeast.com. I appreciate your help.

    ~ Karen Pavone

    #1979918

    eurello
    Staff

    Hi Karen,

    I don’t believe you can, because the follow blog button performs an action — it doesn’t just link to another site. But what you can do is create a page with your Follow button on it using the shortcode:
    http://en.support.wordpress.com/blog-subscription-shortcode/

    Then, you can link to that page in your menu. :)

    #1979925

    karenpavone
    Member

    More questions! I now have the social media links established in the header of my webpage. Is there any way to get the icons instead of using the words? For instance, the “bird” instead of “twitter”? etc.

    #1979926

    eurello
    Staff

    Hi there,

    Sure! You can upload the icons you’d like to use for each service to your Media Library, and then use CSS to replace the menu items with the icons. For example:

    li.page_item.page-item-2442 {
    font-size: 0;
    }

    li.page_item.page-item-2442> a::before {
    content: url(‘link to your image here’);
    position: relative;
    }

    And so on for each menu item. Does that make sense? If you need help, go ahead and add your social media links to your menu as custom links, and upload the icons you want to use for them. I’ll be happy to help you out.

The topic ‘How to place Social Media icons in the header bar’ is closed to new replies.