There are many ways of showing social media (Twitter, Facebook, Linkedin etc.) icons on your WordPress menu. Almost all include having to install a plugin or the theme to provide the icon links. What many people want however is to include icons in a WordPress menu itself which most plugins and themes don’t easily support. Fortunately it’s really incredibly simple to include SEO friendly icons in your WordPress menu.
Just follow the instructions below (the instructions have been tested on Genesis framework and WooThemes Canvas themes).
Add Font Awesome to WordPress
Font Awesome is a very popular icon font. Many themes include the necessary Font Awesome files but if not then merely save the following into your WordPress functions.php file:
// Register Style per www.organicwebcomau.wpcomstaging.com function organicweb_fontawesome() { wp_register_style( 'organicweb_font_awesome', '//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css', false, '4.2.0' ); wp_enqueue_style( 'organicweb_font_awesome' ); } add_action( 'wp_enqueue_scripts', 'organicweb_fontawesome' );
Find the Font Awesome icons you want to use
The full list of icons are shown at the Font Awesome website. Click the icon/s you want to use and copy the HTML for each icon.
For example the HTML to copy for the Twitter icon is
<i class="fa fa-twitter"></i>
How to insert Font Awesome into a menu
To add an icon to your menu with a link to your social media profile follow these steps:
- Once logged in to your WordPress dashboard go to Appearance -> Menus.
- Select the required menu in the Select a menu to edit: selector.
- Under Links enter the destination URL in the URL field (e.g. your Twitter profile URL.
- Enter the Font Awesome icon HTML as copied previously in the Link Text field.
- Click Save Menu.
Leave a ReplyCancel reply