I’m using the wpForo “Forums” widget inside Elementor (WordPress widget).
In Elementor edit mode, the forum list displays correctly (icons, spacing, parent/child hierarchy).
On the frontend, the same widget renders flatter — Font Awesome icons disappear and indentation/spacing changes, even though the HTML output is identical.
Hi @d0rk62 ,
The Elementor edit mode doesn't load wpForo CSS code. Also, wpForo widgets are displayed correctly if they are loaded in wpForo Sidebar, in other places you'll see different layout and stile. So we only support wpForo widget layout and style issues if they have been loaded in wpForo Sidebar in through Appliance > Widget admin page. Other ways of inserting wpForo widgets will have unexpected results in therms of view, because the CSS class and ID tree will be crashed even if the widget HTML is the same.
Please use wpForo sidebar for wpForo widgets if you want to get the best results. In other cases you should do custom CSS to make it look as you want.
The doc: https://wpforo.com/docs/wpforo-v2/getting-started/forum-sidebar-and-widgets/wpforo-sidebar/
Key points from Robert (wpForo admin):
-
Elementor edit mode does NOT load wpForo CSS - But I see the images in edit mode they dont display when im out of edit mode.
-
wpForo widgets are only officially supported inside the wpForo Sidebar.. ok thx
-
When widgets are placed elsewhere (Elementor, page builders, theme areas):
-
CSS class/ID structure does not match
-
Layout and icons may break
-
Behavior is considered unsupported
-
-
If you don’t use the wpForo Sidebar:
-
Custom CSS is required
-
Visual differences are expected
starting digging in becuase i really wanted another answer.
/wp-content/plugins/wpforms-lite/assets/lib/font-awesome/css/all.min.css
removed this plugin dont need it now the css is getting picked up by elementor.
https://mspservices.us/wp-content/plugins/elementor/assets/lib/font-awesome/css/fontawesome.min.css?ver=5.15.3im digging into this more
-
got it
https://mspservices.us/
-
Go to WordPress Admin → Plugins → Add New
-
Search for “Code Snippets”
-
Install & Activate it
-
Go to Snippets → Add New
-
Name it something like:
Force Font Awesome 5 for wpForo & Elementor
-
Paste this code:
add_action('wp_enqueue_scripts', function () { // Force Font Awesome 5 (required by wpForo & Elementor frontend) wp_enqueue_style( 'fontawesome-5', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css', [], '5.15.4' ); }, 5);