Add social icons to the top menu
-
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-themebut it doesn’t work in my site.
Please helpThanks a lot
The blog is: https://fmgandpartners.wordpress.com
The blog I need help with is: (visible only to logged in users)
-
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
-
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-menuThese 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:
- Visit the Appearance -> Menu page
- Create a Custom Link called Facebook and paste the URL to your Facebook page
- Click the “Add to Menu” to add your Facebook menu link to a menu
- 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.)
- 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.
- Toggle open the Facebook link that you added above.
- In the CSS Classes input field, add “facebook” as the css class.
- 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!
-
-
- The topic ‘Add social icons to the top menu’ is closed to new replies.
