Social Media Icons into the Menu Bar

• 

  vlogazul · Member · Jul 21, 2015 at 8:11 am

  • Copy link
  • Add topic to favorites

  Hello, I am using the Expound theme and i would like to know if it’s possible to add social media icons or images into the menu bar. As you can see i have a twitter and a facebook custom link at the end of the menu bar but i would like to know if i can add an icon to that particular custom link. Thanks!

  The blog I need help with is: (visible only to logged in users)

• 

  sfarley85 · Member · Jul 21, 2015 at 8:34 am

  • Copy link

  Hi,

  I believe to do this you will need to alter the CSS, which will require the Premium or Business versions of WordPress.com (given your domain I’m assuming you are currently using the free version).

  Alternately, you can add widgets to your sidebar for twitter and facebook, configured by going to Appearance>Customize>Widgets. Would that be a sufficient solution?

• 

  staff-happychia · Staff · Jul 21, 2015 at 8:36 am

  • Copy link

  Could you confirm if you have Custom Design upgrade on your account so that we can help you with CSS?

• 

  vlogazul · Member · Jul 22, 2015 at 3:56 am

  • Copy link

  I now indeed have the CSS upgrade with the premium package.

• 

  staff-happychia · Staff · Jul 22, 2015 at 8:55 am

  • Copy link

  Could you add this CSS to the CSS Editor and see how the result looks on your site:

  li#menu-item-12726 {
       background-image: url('https://chaittestpress.files.wordpress.com/2015/01/02_facebook-e1437555094134.png');
      Background-repeat: no-repeat;
      background-position: center; 
  
  }
  
  li#menu-item-12727 {
      background-image: url('https://chaittestpress.files.wordpress.com/2015/01/01_twitter-e1420538901928.png');
      Background-repeat: no-repeat;
      background-position: center; 
  
  }
  
  li#menu-item-12726 a,
  li#menu-item-12727 a {
      opacity: 0;
  }

  The icons are linked from my test media library. You will have to eventually download the icons, add to your media library and replace the url in the above CSS.