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

How to Fix and Customize OnePress Theme Icon Display Issues

20 threads Sep 16, 2025 Theme → Onepress

Content

Icons are a core visual element of the OnePress theme, used extensively in sections like Features, Contact, and Social Footer. However, users often encounter issues with their display, alignment, and customization. This guide covers the most common icon-related problems and their solutions, based on community troubleshooting.

Common OnePress Icon Issues and Their Solutions

1. Icons Not Appearing or Disappearing After an Update

Problem: Icons fail to load or the option to select them vanishes from the Customizer.

Why it happens: This is frequently caused by a conflict with another plugin or, in some cases, a limitation when working on a local server installation.

Solution: The first step is always to perform a conflict test. Temporarily disable all plugins and check if the icons reappear. If they do, reactivate your plugins one by one to identify the culprit. A common offender mentioned in the forums is the "Happy Elementor Addons" plugin. If the issue is isolated to a local installation, this is a known limitation of the theme's icon selection tool.

2. Icons Are Misaligned or Not Centered

Problem: Icons appear off-center, too far apart, or left-aligned when using an odd number of items in a multi-column layout.

Why it happens: The theme's CSS grid is designed for specific column layouts. Using three items in a space meant for four columns, for example, can cause alignment issues.

Solution: First, ensure you have selected the correct column layout in the Customizer for the number of items you have (e.g., choose "3 columns" for three feature items). For finer control over spacing, use custom CSS. To reduce the space between icons, you can target the container with a rule like .feature-item { margin: 0 10px; }, adjusting the pixel value as needed.

3. Icons Are Too Large or Overlapping Text

Problem: Font Awesome icons render at an excessively large size, causing them to touch each other or overlap with titles.

Why it happens: This can be caused by CSS conflicts from other plugins or themes.

Solution: Again, start by disabling plugins to rule out a conflict. To permanently control the size, add custom CSS. For example, to resize feature icons, you could use: .feature-icon i { font-size: 2rem; } Adjust the font-size value until you achieve the desired look.

4. How to Use Custom Images Instead of Font Icons

Problem: A user wants to use their own designed images instead of the default Font Awesome icons.

Solution: The OnePress theme supports this natively in some sections. In the Features section, each item has a "Custom Icon" option where you can upload an image. For the Footer Social section, this functionality is not built-in. A common workaround is to use a plugin or custom code to replace the social icons.

5. How to Change or Add Specific Icons (e.g., WhatsApp)

Problem: A user wants to replace the default fax icon in the Contact section with a WhatsApp icon.

Solution: This requires modifying theme files. The recommended method is to use a child theme. Copy the parent theme's section-parts/section-contact.php file to your child theme. Locate the line generating the fax icon (around line 80) and replace its HTML with the code for a WhatsApp icon, which can be found on the Font Awesome website.

6. Removing or Customizing the Hover Animation

Problem: The hover effect on feature icons is unwanted.

Solution: Add the following CSS to Appearance > Customize > Additional CSS to disable the animation:

.feature-item:hover .icon-background-default {
    transition: none !important;
    transform: none !important;
}

General Best Practices for Icon Customization

  • Use a Child Theme: Any time you modify theme files directly, use a child theme to prevent your changes from being overwritten by updates.
  • Additional CSS: For visual tweaks (size, color, spacing), always use the Additional CSS section in the Customizer. This is the safest way to add custom styles.
  • Clear Caches: After making changes, clear any site or browser caches to see the results immediately.

By following these steps, you should be able to resolve the majority of icon display issues in the OnePress theme. For more complex customizations, the theme's structure often requires direct code changes in a child theme.

Related Support Threads Support