We have updated Flexmonster Software License Agreement, effective as of September 30, 2024. Learn more about what’s changed.

Column Filter Icon Styling

Answered
Ravi Kumar asked on November 13, 2020

Hi,
 
I need to set some different coloring for the Filter & Sorting Icons present in the column headers as in attachment.
Currently Icons are not visible much in that blue color background.
Please provide any solution to alter color of those Icons.
 
Regards,
Ravi

Attachments:
fm-filter-icon.PNG

1 answer

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster November 13, 2020

Hello, Ravi,
 
Thank you for contacting us.
 
In case significant changes to the color theme need to be made, we recommend using our Custom Theme Builder.
This tool serves to create custom color themes of the component. We suggest using it to create a color theme with a preferred icons color.
More information about this tool can be found in our documentation.
 
If the Theme Builder is not an option for you, you can overwrite CSS styling for icons as shown below:

#fm-pivot-view .fm-grid-layout .fm-filter-header i.fm-filter-icon:before,
#fm-pivot-view .fm-grid-layout.fm-flat-view i.fm-icon:before,
#fm-pivot-view .fm-grid-layout i.fm-icon:before {
  color: green !important;
}

You are welcome to see the JSFiddle demonstrating this approach.
 
Please let us know if it works for you.
Do not hesitate to contact us in case further questions arise.
 
Best regards,
Illia

Please login or Register to Submit Answer