Social Footer Menu Icons

  • Social media sites such as Twitter, Facebook, YouTube are great ways to spread the word about your site for free. SocialEngine helps you take advantage of these resources by providing social media icons in the footer of your site in an attractive design. We’ve made this super simple to implement as well. Follow along with us as we teach you how to enable this great feature!

    Tools Needed for This Tutorial:

    • Site Admin Account, logged in to your SocialEngine website.
    • Links to your social media site pages or profiles.

    Finding the Social Site Links Menu

    1. Log in to your Admin Panel and navigate to Appearance > Menu Editor.
    2. Select to Edit the “Social Site Links Menu.” You’ll see a list of each social site currently available.
    1. We’ll show you the Facebook link for this part of the tutorial. This screen may look slightly different depending on which site you are connecting but the principles are the same. Click “edit” to the right of the Facebook menu item.
    2. A popup will open. Enter your Facebook profile or page URL. You can also choose to change the icon (more details below), set the link to open in a new window, and whether this is enabled or not. Click “Edit Menu Item” to save your changes.
    3. Continue editing each link to add your social URLs.
    4. If you visit front end and scroll down to your footer, you’ll see the icon(s) on the far right.

    To add another social link, click the “Add Item” link.

    A popup will open that is similar to the above image for editing the social links:

    The “Label” is for your use only as it only shows in the Admin Panel.

    For the icon, you can choose a font-awesome icon or enter an icon class (details follow).

    Click “Create Menu Item” to save this menu.

    How to Change the Menu Icon

    When in the Edit or Add screens, you can change the icon that shows for each of the links. There are two options, http://fontawesome.io/icons/ or icon class. 

    Font-Awesome

    Choose the icon you want to use from the list at font-awesome. For our example, we’ve chosen the Facebook Square icon.

    Notice on the page, it give you the “fa” code to copy.

    Copy that code and enter it in the input box for the icon/icon class and click “Edit Menu Item.”

    Icon Class

    To use an icon from your site resources, find the “icon class” for the image you want to use. We’ll use “inspect element” in our browser, Chrome, to pinpoint an image we want to use for this tutorial. Here, we chose the classifieds icon from the feed:

    Add the code to the “icon/icon class” input box in the edit popup as shown here.

    Click “Edit Menu Item” to save your changes.

    The default social links cannot be deleted but they can be disabled. To disable a social link, follow the steps for How to Edit a social link to get to the edit popup. Once in the edit popup, click “Enabled” to disable the social link.

    To delete a social link that you have added, click “delete” to the right of the social link.