{"id":34576,"date":"2023-08-14T05:35:34","date_gmt":"2023-08-14T05:35:34","guid":{"rendered":"https:\/\/www.wpstaq.com\/knowledgebase\/how-to-fix-missing-icons-in-wordpress\/"},"modified":"2024-08-09T06:04:09","modified_gmt":"2024-08-09T06:04:09","slug":"how-to-fix-missing-icons-in-wordpress","status":"publish","type":"knowledgebase","link":"https:\/\/www.wpstaq.com\/sg\/knowledgebase\/how-to-fix-missing-icons-in-wordpress\/","title":{"rendered":"How to fix missing icons in WordPress"},"content":{"rendered":"

When utilizing a page builder such as Elementor (among others), you might notice that icons are visible within the builder environment. However, once you exit or preview your site, these icons disappear.<\/p>\n

Root Cause<\/strong>: The issue often doesn’t stem from hosting but rather from the settings within the page builder itself.<\/p>\n

Fixing the Missing Icons in Different Page Builders<\/strong><\/h2>\n

To cater to a wide range of users, we’ve provided steps for various page builders, focusing on enabling icon libraries like Font Awesome:<\/p>\n

Elementor:<\/strong><\/h3>\n
    \n
  • Navigate to: WordPress Dashboard<\/code> > Elementor<\/code> > Settings<\/code>.<\/li>\n
  • Switch to the Advanced<\/code> tab.<\/li>\n
  • Locate “Load Font Awesome 4 Support” and select Yes<\/code>.<\/li>\n
  • Finalize by saving changes and clearing your website’s cache.<\/li>\n<\/ul>\n

    WPBakery Page Builder:<\/strong><\/h3>\n
      \n
    • Head to: Dashboard<\/code> > WPBakery Page Builder<\/code> > General Settings<\/code>.<\/li>\n
    • Ensure the option “Disable FontAwesome” remains unchecked.<\/li>\n
    • Remember to save if you’ve made alterations, followed by cache clearance.<\/li>\n<\/ul>\n

      Divi Builder:<\/strong><\/h3>\n
        \n
      • Choose: Dashboard<\/code> > Divi<\/code> > Theme Options<\/code>.<\/li>\n
      • In the General<\/code> tab, ensure “Disable Font Awesome and Material Icons” isn’t checked.<\/li>\n
      • Apply changes and ensure you clear cache for optimal performance.<\/li>\n<\/ul>\n

        Beaver Builder:<\/strong><\/h3>\n
          \n
        • Proceed to: Settings<\/code> > Beaver Builder<\/code> > General<\/code> from the WordPress admin section.<\/li>\n
        • Confirm “Disable Font Awesome icons” is set to No<\/code>.<\/li>\n
        • As always, save any modifications and then purge the site’s cache.<\/li>\n<\/ul>\n

          Thrive Architect:<\/strong><\/h3>\n
            \n
          • From the dashboard, select: Thrive Dashboard<\/code> > Architect<\/code> > General Settings<\/code>.<\/li>\n
          • Activate the “Font Awesome Support” option.<\/li>\n
          • Conclude by saving and purging your website’s cache.<\/li>\n<\/ul>\n

            Additional Tips for Ensuring Icon Visibility<\/strong><\/h2>\n

            Post the activation of the necessary settings within your chosen builder, always clear both your website cache and browser cache. If the issue persists, consider reviewing any optimization plugins or CDN configurations that might obstruct icon visibility.<\/p>\n","protected":false},"featured_media":0,"parent":0,"template":"","class_list":["post-34576","knowledgebase","type-knowledgebase","status-publish","hentry","categories-troubleshooting-other"],"acf":[],"yoast_head":"\nHow to fix missing icons in WordPress - Managed Hosting Platform for WordPress<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.wpstaq.com\/knowledgebase\/how-to-fix-missing-icons-in-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to fix missing icons in WordPress - Managed Hosting Platform for WordPress\" \/>\n<meta property=\"og:description\" content=\"When utilizing a page builder such as Elementor (among others), you might notice that icons are visible within the builder environment. However, once you exit or preview your site, these icons disappear. Root Cause: The issue often doesn’t stem from hosting but rather from the settings within the page builder itself. Fixing the Missing Icons…\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wpstaq.com\/knowledgebase\/how-to-fix-missing-icons-in-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Managed Hosting Platform for WordPress\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/staqhosting\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-09T06:04:09+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/knowledgebase\\\/how-to-fix-missing-icons-in-wordpress\\\/\",\"url\":\"https:\\\/\\\/www.wpstaq.com\\\/knowledgebase\\\/how-to-fix-missing-icons-in-wordpress\\\/\",\"name\":\"How to fix missing icons in WordPress - Managed Hosting Platform for WordPress\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/#website\"},\"datePublished\":\"2023-08-14T05:35:34+00:00\",\"dateModified\":\"2024-08-09T06:04:09+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/knowledgebase\\\/how-to-fix-missing-icons-in-wordpress\\\/#breadcrumb\"},\"inLanguage\":\"en-sg\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.wpstaq.com\\\/knowledgebase\\\/how-to-fix-missing-icons-in-wordpress\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/knowledgebase\\\/how-to-fix-missing-icons-in-wordpress\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.wpstaq.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to fix missing icons in WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/#website\",\"url\":\"https:\\\/\\\/www.wpstaq.com\\\/\",\"name\":\"Managed Hosting Platform for WordPress\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.wpstaq.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-sg\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/#organization\",\"name\":\"Staq\",\"alternateName\":\"WPStaq\",\"url\":\"https:\\\/\\\/www.wpstaq.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-sg\",\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.wpstaq.com\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/cropped-LogoNoText.png\",\"contentUrl\":\"https:\\\/\\\/www.wpstaq.com\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/cropped-LogoNoText.png\",\"width\":512,\"height\":512,\"caption\":\"Staq\"},\"image\":{\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/staqhosting\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/wpstaq\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to fix missing icons in WordPress - Managed Hosting Platform for WordPress","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.wpstaq.com\/knowledgebase\/how-to-fix-missing-icons-in-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"How to fix missing icons in WordPress - Managed Hosting Platform for WordPress","og_description":"When utilizing a page builder such as Elementor (among others), you might notice that icons are visible within the builder environment. However, once you exit or preview your site, these icons disappear. Root Cause: The issue often doesn’t stem from hosting but rather from the settings within the page builder itself. Fixing the Missing Icons…","og_url":"https:\/\/www.wpstaq.com\/knowledgebase\/how-to-fix-missing-icons-in-wordpress\/","og_site_name":"Managed Hosting Platform for WordPress","article_publisher":"https:\/\/www.facebook.com\/staqhosting\/","article_modified_time":"2024-08-09T06:04:09+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wpstaq.com\/knowledgebase\/how-to-fix-missing-icons-in-wordpress\/","url":"https:\/\/www.wpstaq.com\/knowledgebase\/how-to-fix-missing-icons-in-wordpress\/","name":"How to fix missing icons in WordPress - Managed Hosting Platform for WordPress","isPartOf":{"@id":"https:\/\/www.wpstaq.com\/#website"},"datePublished":"2023-08-14T05:35:34+00:00","dateModified":"2024-08-09T06:04:09+00:00","breadcrumb":{"@id":"https:\/\/www.wpstaq.com\/knowledgebase\/how-to-fix-missing-icons-in-wordpress\/#breadcrumb"},"inLanguage":"en-sg","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wpstaq.com\/knowledgebase\/how-to-fix-missing-icons-in-wordpress\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.wpstaq.com\/knowledgebase\/how-to-fix-missing-icons-in-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.wpstaq.com\/"},{"@type":"ListItem","position":2,"name":"How to fix missing icons in WordPress"}]},{"@type":"WebSite","@id":"https:\/\/www.wpstaq.com\/#website","url":"https:\/\/www.wpstaq.com\/","name":"Managed Hosting Platform for WordPress","description":"","publisher":{"@id":"https:\/\/www.wpstaq.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wpstaq.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-sg"},{"@type":"Organization","@id":"https:\/\/www.wpstaq.com\/#organization","name":"Staq","alternateName":"WPStaq","url":"https:\/\/www.wpstaq.com\/","logo":{"@type":"ImageObject","inLanguage":"en-sg","@id":"https:\/\/www.wpstaq.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.wpstaq.com\/wp-content\/uploads\/2023\/05\/cropped-LogoNoText.png","contentUrl":"https:\/\/www.wpstaq.com\/wp-content\/uploads\/2023\/05\/cropped-LogoNoText.png","width":512,"height":512,"caption":"Staq"},"image":{"@id":"https:\/\/www.wpstaq.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/staqhosting\/","https:\/\/www.linkedin.com\/company\/wpstaq"]}]}},"_links":{"self":[{"href":"https:\/\/www.wpstaq.com\/sg\/wp-json\/wp\/v2\/knowledgebase\/34576","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wpstaq.com\/sg\/wp-json\/wp\/v2\/knowledgebase"}],"about":[{"href":"https:\/\/www.wpstaq.com\/sg\/wp-json\/wp\/v2\/types\/knowledgebase"}],"wp:attachment":[{"href":"https:\/\/www.wpstaq.com\/sg\/wp-json\/wp\/v2\/media?parent=34576"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}