Creating Icons for Facebook and Twitter on custom menu.

• 

  mattyoliver · Member · Feb 13, 2014 at 7:33 pm

  • Copy link
  • Add topic to favorites

  Hi there, I would like to add two Logos (Facebook & Twitter) to my custom menu, rather than the text which is currently there now.

  How do I add Facebook and Twitter icons to the top of my blog so that people can click to be directed to and/or follow on Facebook and Twitter? I’m using Massive Press.

  I currently have the text set up and it directs me to facebook or twitter but would love it if they were logos rather than just text.

  Thanks

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

• 

  thesacredpath · Member · Feb 14, 2014 at 12:22 am

  • Copy link

  Hi there, with the recent update to Sharing, the Genericons font is available on all WordPress themes. Add the following and see what you think. It uses the Genericons icons for twitter and facebook.

  #menu-item-374 a {
      color: rgba(0, 0, 0, 0);
      font-size: 3px;
  }
  #menu-item-374 a:after {
      color: #FFFFFF;
      content: "f203";
      font-family: Genericons;
      font-size: 20px;
      position: relative;
      right: 50%;
  }
  #menu-item-375 a:after {
      color: #FFFFFF;
      content: "f202";
      font-family: Genericons;
      font-size: 20px;
      position: relative;
      right: 50%;
  }
  #menu-item-375 a {
      color: rgba(0, 0, 0, 0);
      font-size: 3px;
  }

• 

  mattyoliver · Member · Feb 19, 2014 at 2:15 pm

  • Copy link

  thanks!! works perfectly.

• 

  thesacredpath · Member · Feb 19, 2014 at 6:42 pm

  • Copy link

  You are welcome.

• 

  frayetta · Member · Feb 20, 2014 at 11:56 am

  • Copy link

  Hi there thanks for these tips … just a quick question to both of you. Does this work on hosted wordpress.com themes? And if so, does it require the “Custom Design” upgrade?

• 

  hfzrhmn · Member · Feb 20, 2014 at 1:56 pm

  • Copy link

  Hi,

  I can answer that :) Yes, this works for WordPress.com themes, although the CSS implementation will differ depending on what theme you use.

  You will indeed need the Custom Design upgrade to apply the CSS.

• 

  frayetta · Member · Feb 20, 2014 at 2:25 pm

  • Copy link

  Thank you – yes I have the Custom Design option. The theme I’m using is Expound. Is the CSS code provided above just for the Massive Press theme? I tried entering it into the CSS editor and saving it but nothing happened which is my lack of CSS skills most likely!

• 

  thesacredpath · Member · Feb 20, 2014 at 7:26 pm

  • Copy link

  @frayetta, yes the code for Expound will be a little different. Since you are using a different theme, can I ask that you create a new thread in the CSS forum and I will watch for your post. That will prevent confusion for people coming to this thread in the future. Many thanks in advance.

• 

  frayetta · Member · Feb 20, 2014 at 10:53 pm

  • Copy link

  Thanks thesacredpath – have reposted as requested now thanks

• 

  thesacredpath · Member · Feb 20, 2014 at 11:56 pm

  • Copy link

  Thanks, and I have responded with the code.