BugWP logo BugWP
Back to Community
Home / Community / Theme → Hestia

How to Fix, Remove, or Customize Social Icons in Hestia

28 threads Sep 16, 2025 Theme → Hestia

Content

Social icons are a core part of the Hestia theme's design, appearing in the top bar, footer, and at the end of blog posts. However, users often encounter issues where icons are missing, broken, incorrectly aligned, or simply not wanted. This guide compiles the most common social icon problems and their solutions, based on community discussions.

Common Hestia Social Icon Issues

Based on user reports, the typical problems fall into a few categories:

  • Icons Not Showing: Icons disappear after a theme update, often due to changes in the Font Awesome icon library.
  • Unwanted Icons: Default sharing icons (Facebook, Twitter, Email) appear on posts or as floating buttons and cannot be removed through the customizer.
  • Alignment Problems: Icons in the top bar appear on the left instead of the right, or columns swap places after an update.
  • Outdated Icons: The theme uses the old Twitter bird logo instead of the new X logo, or still includes Google+.
  • Incorrect Icons: The theme automatically detects links (like mailto: or x.com) and replaces them with an icon, sometimes incorrectly.

How to Troubleshoot and Fix Social Icon Problems

1. Fixing Missing or Broken Icons

If your social media icons vanished after a Hestia update, it's frequently related to the Font Awesome library. A common fix is to add a small piece of CSS code to your site.

Solution: Navigate to Appearance > Customize > Additional CSS and paste the following code:

/** Temp fix for missing icons **/
.fa-search, .fas, .fa-times{
font-family: FontAwesome;
}

This CSS can help restore icons that are not rendering correctly. Always ensure your theme is updated to the latest version, as the Hestia team often releases patches for these issues.

2. Removing Unwanted Sharing Icons from Blog Posts

Many users want to remove the three default sharing icons (Facebook, Twitter, Email) that appear at the bottom of blog posts. This is not a configurable option in the customizer and requires CSS.

Solution: To remove them completely, add this CSS to the Additional CSS section:

.single-post .entry-social {
display: none !important;
}

3. Controlling Icon Alignment in the Top Bar

The alignment of items in the very top bar is controlled by the widgets you place in the Left Sidebar and Right Sidebar areas for that section. If your social icons are on the left but you want them on the right, you need to move the widget.

Solution: Go to Appearance > Customize > Very Top Bar. Ensure your social media menu or HTML widget is placed in the Right Sidebar area to align it to the right.

4. Updating the Twitter Icon to X

Hestia has updated many areas to use the new X logo, but some areas, like the Team section, may still show the old bird icon or have issues displaying the new one. This is often dependent on broader WordPress core updates. The sharing buttons may also still use twitter.com URLs instead of x.com.

Solution: For now, the most reliable way to get updated X icons and sharing functionality is to wait for a subsequent Hestia update that fully implements these changes. The development team is typically aware of these requests.

5. Disabling Automatic Icon Generation

Hestia automatically detects certain link types (like mailto:, tel:, or links to social sites) and replaces the link text with an icon. If you want to keep the link but show the text label instead, you need to override this behavior with CSS.

Solution: This requires more advanced CSS to target the specific automatic icons you wish to hide. A general method is to hide the icon pseudo-elements.

/* Example: Hide automatic icons in the top bar */
#header .hestia-top-bar .menu-item a::before {
display: none;
}

When to Consider a Plugin

If Hestia's built-in social options are too limited, many community members recommend using a plugin for more control. The OrbitFox Companion plugin (formerly ThemeIsle Companion) offers a social sharing module that allows you to add more networks and customize the display. This is a common suggestion for users who want to add icons like LinkedIn or Pinterest.

Conclusion

Most social icon issues in Hestia can be resolved with targeted CSS code or by reconfiguring widgets in the customizer. For more complex customization or adding new networks, a dedicated social plugin is often the best path forward. The Hestia theme is actively developed, so keeping it updated is the best way to ensure access to the latest icons and bug fixes.

Related Support Threads Support