TopBar social icons broken if Elementor “Icon List” widget used on page

  • Resolved hajdolaszloattila

    (@hajdolaszloattila)


    5 years, 7 months ago

    Hi all,

    I have a TOP BAR set in OceanWP with some content on left and Social Icons on the right.
    – I have set this up via the OceanWP customizer.
    – This is shown on all of my pages

    – I have started to build my Homepage with Elementor
    – As soon as i add “Icon List” widget from Elementor into the page in a section..
    – Social icons in the Top Bar will show up as empty squares.
    – This happens only on the page im using this widget.
    – If i remove the widget, social icons will show properly

    – I suppose somehow the widget has some interference with the TOP BAR, but could not figure out what.

    Any ideas on how to avoid this issue?

    Much appreciated

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hello,

    Try adding the below code to the Appearance > Customize > Custom CSS section to fix this issue –

    .fa {
    font: normal normal normal 14px/1 FontAwesome !important;
}
    Thread Starter hajdolaszloattila

    (@hajdolaszloattila)

    Hi @apprimit ,

    Thanks for the answer. Sure, i will try that.
    Quick question…if i add CSS to Appearance > Customize > Custom CSS section, and then update the theme, will my custom CSS stay as it is ? Or will go away ?

    Thanks in advance ?

    PS: Could you please explain your answer, so i can understand better, why is this happening ?

    Thread Starter hajdolaszloattila

    (@hajdolaszloattila)

    Hi @apprimit

    It seems i have found a better/shorter solution, which does not require “!important”.

    .fa {
    font-family: FontAwesome;
    }

    Your answers solves the problem as well. I only wanted to avoid the “!important”.

    Thanks any way.
    Have a good one

    Glad to hear that you have found another solution! It is happening because Elementor uses font-awesome 5 and OceanWP uses version 4.7. We are trying to update the font-awesome to fix it. The above fix is a temporary solution.

    After the theme update, the code will not erase if you have added it in the Appearance > customize > custom css section.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘TopBar social icons broken if Elementor “Icon List” widget used on page’ is closed to new replies.