Icon list elementor

Support » Theme: OceanWP » TopBar social icons broken if Elementor Icon List widget used on page

• Resolved hajdolaszloattila

  [@hajdolaszloattila]

  
  

  2 years, 6 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

• Amit Singh

  [@apprimit]

  2 years, 6 months ago

  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]

  2 years, 6 months ago

  Hi @apprimit ,

  Thanks for the answer. Sure, i will try that.
  Quick questionif 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]

  2 years, 6 months ago

  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

  Amit Singh

  [@apprimit]

  2 years, 6 months ago

  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.

Video liên quan