Charlotte - Social Media Icons

In the Charlotte theme, the social media icons can be displayed in the following locations:

  • Top navigation menu (next to the search icon)
  • Floating on the left side of your site
  • And inside any available widget area – sidebar, footer, front page, etc.
Note about the icons: The Charlotte  blog demo displays the icons floating on the side, while the Charlotte  website demo displays the icons in the top navigation. Both icon locations are included in BOTH versions of the Charlotte theme. You can even have the icons display in both places at once, if you'd like!

Useful tips

A “social profile link” is the direct URL to your profile on Facebook, Twitter, etc. To obtain your social profile link, visit your public profile in your browse and copy the URL from the address bar.

You must use a complete URL when setting up your icons, meaning your URL should include   http:// and look something like this: http://www.facebook.com/17thavenuedesigns. If you only use "facebook.com/17thavenuedesigns," you will get a page error when you click on the icon.

Linking your Icons

  1. In your theme download file, go to the Custom Codes folder and open the “social-icons” file. This is an editable document where you’ll be connecting each social icon to your social profiles.
  2. Inside the file, you will see several spaces that say YOUR FACEBOOK LINK or YOUR TWITTER LINK. Paste the URLs of your social profiles to replace these text markers.
  3. Be sure that you keep everything around your link the exact same, including the quotation marks. Sample code: <a href=”http://facebook.com/17thavenuedesigns.com/”>
  4. After you have added all of your links, highlight the code in social icons document and copy it.
  5. From here, follow the instructions below to place your icons in the theme.

Navigation Menu Icons

Before you can add the navigation social icons, you will need to turn on your Primary Navigation Menu. Click here for instructions.

Go to Appearance > Widgets. Drag a Custom HTML widget into the Nav Social Icons widget area. Paste your code in the text box from Step 4 above. Save.

Floating Social Icons

Go to Appearance > Widgets. Drag a Custom HTML widget into the Floating Social Icons widget area. Paste your code in the text box from step 4 above. Save.

Using icons elsewhere in your theme

You can add the social icons code almost anywhere in your theme.

  • In the sidebar: Add Custom HTML widget into the Primary Sidebar widget area. Paste your social icons code.
  • In other widget areas: Same as above – use a Custom HTML widget.
  • On a page: Switch your page editor to text mode and paste your social icons code.
  • In a blog post: Switch your post editor to text mode and paste your social icons code.

Icons not displaying correctly?

If your icons are not displaying or linking correctly, please see this article.