The following will work for any theme, though we recommend our beautifully simple tru Theme. Adding social icons to any WordPress menu is as simple as enabling Font Awesome and retrieving an HTML code.
- Install and activate the Better Font Awesome plugin to enable access to the Font Awesome icon library.
- In the Appearance > Menus panel click Screen Options at the top right. In the tray that drops down ensure Link Target, Title Attribute, and CSS Classes are all checked.
- Click Screen Options once again to close the tray.
- Scroll down and in the lefthand column expand the Custom Links section. Enter your social URL into the URL field and the word Social into the Link Text field. Then click Add to Menu.
- Now you should see your new Social menu item in the Menu Structure area. Expand this menu item to reveal the details.
- In the Title Attribute textbox enter the name of the social network (ex. Twitter).
- In the CSS Classes textbox enter the letters “fa” (without the double quotes). This is the class declaration for Font Awesome.
- Finally, go to the Font Awesome cheatsheet and find the HTML for the icon corresponding to the social network you’re linking to. For example, the HTML code for the Twitter logo “fa-twitter” is Enter that entire string into the Navigation Label textbox, replacing Social. The HTML string starts with the “&” and ends with the “;”. You must include this entire string, but do not include the brackets that are present on the Font Awesome cheatsheet. NOTE: The HTML string will appear as a square once it’s saved in the menu item. This is expected. When you look at the frontend of your site, however, it will display as the Font Awesome icon you have chosen.
- Click Save Menu and you’re done.
If you would like to have multiple social profiles listed below any of your social icons simply add new Custom Links menu items and nest them below your social icons. To nest a menu item simply drag and drop it below the parent item of your choice. Then click and drag it slightly to the right. You will see it indent and become a child of the parent menu item.
For these Custom Links simply add your URL, your social network handle (ex. @SPYR) to the Link Text field and leave the Title Attribute and CSS Classes fields empty. This way only the parent menu item will have the icon and the children will display the username of the specific social profiles that you’re referencing.