Add social icons to the top menu

• 

  luciagervasio · Member · Mar 2, 2015 at 9:20 am

  • Copy link
  • Add topic to favorites

  Hello
  I’m trying to add social icons to the top menu but the only visible thing I get is the word, not the icon.
  I followed the instructions that I found here:
  https://en.support.wordpress.com/menus/social-links-menu/
  here:
  https://en.support.wordpress.com/menus/#creating-a-custom-menu
  and here:
  https://en.forums.wordpress.com/topic/how-can-i-get-the-social-network-icons-in-full-frame-theme

  but it doesn’t work in my site.
  Please help

  Thanks a lot

  The blog is: https://fmgandpartners.wordpress.com

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

• 

  susanhayse · Member · Mar 2, 2015 at 11:35 am

  • Copy link

  Take a look at the solution @thesacredpath suggested a while back. He’s using CSS to make the text of the menu item transparent, then overlaying that item with an image, via CSS. Maybe this will work with your theme if you have a plan that allows for custom CSS.

  https://en.forums.wordpress.com/topic/social-media-icons-19?replies=5#post-2276817

• 

  kathrynwp · Staff · Mar 3, 2015 at 4:14 pm

  • Copy link

  Full Frame is not a theme that was built to support a Social Links menu, so the instructions here don’t apply to this theme

  https://en.support.wordpress.com/menus/social-links-menu/
  https://en.support.wordpress.com/menus/#creating-a-custom-menu

  These are the instructions for creating a social links menu in Full Frame:

  Full Frame supports the following social icons: Twitter, Facebook, WordPress, Google Plus, LinkedIn, Pinterest, Flickr, Vimeo, YouTube and Tumblr.

  To create a Facebook link icon do the following:

  1. Visit the Appearance -> Menu page
  2. Create a Custom Link called Facebook and paste the URL to your Facebook page
  3. Click the “Add to Menu” to add your Facebook menu link to a menu
  4. After the Facebook menu item has been added, click the Screen Options link at the top right of the page. (See this screenshot for help.)
  5. Under the “Show Advanced Menu Options” section, make sure CSS Classes is checked. This will add a new input field called “CSS Classes” for each menu item below.
  6. Toggle open the Facebook link that you added above.
  7. In the CSS Classes input field, add “facebook” as the css class.
  8. Repeat this for using any of the corresponding class names: twitter, facebook, wordpress, google-plus, linkedin, pinterest, flickr, vimeo, youtube and tumblr.

  See this screenshot of a correctly filled out menu for showing Facebook, Twitter and Vimeo icons.

  When looking at your menu, it seems like you’ve missed a few steps, as there is no CSS class applied to your Twitter and Facebook links. As soon as you add those classes the icons should appear.

  Please see this screenshot:

  

  Be sure “CSS Classes” is checked off in the Screen Options panel as you see in the screenshot and then add the “facebook” and “twitter” class to your two links.

  Let me know how it goes!

• 

  susanhayse · Member · Mar 3, 2015 at 9:54 pm

  • Copy link

  Thanks, @kathrynwp! I continue to learn… :)

• 

  kathrynwp · Staff · Mar 3, 2015 at 10:37 pm

  • Copy link

  susanhayse – indeed! So am I. :)