Despite the COVID-19 outbreak, our team continues operating at full speed. We are always here to support and answer all your questions.

Feel free to reach out by filling this quick form.

Fill the form
Get Free Trial

How can I target the fields icon to change the color

Cedric Gaines asked on April 10, 2020

I want to target the ‘Fields’ icon with the gear and update that icon to another color.  
I tried the traditional way, but may be missing the element selector to change just that icon (Don’t want to change all the icons colors).  Just want to change the icon ‘Fields’?

2 answers

Vera Didenko Flexmonster April 13, 2020

Hello, Cedric,
Thank you for writing to us.
Each Toolbar Tab has an id, for example, the “Fields” Tab’s id is defined as fm-tab-fields.
We kindly advise using the id to change the colors of a specific Tab icon:

#fm-toolbar-wrapper #fm-toolbar li#fm-tab-fields a svg .fill-background {
fill: #B2D2F8;

#fm-toolbar-wrapper #fm-toolbar li#fm-tab-fields a svg .fill-border {
fill: #7FA3D7;

#fm-toolbar-wrapper #fm-toolbar li#fm-tab-fields a:hover svg .fill-background,
#fm-toolbar-wrapper #fm-toolbar li#fm-tab-fields a:hover svg .fill-border{
fill: #345CA1;

Here is a JSFiddle showing how only the “Fields” Tab icon’s color is changed:
Please let us know if this works for you.
Looking forward to your reply.
Kind regards,

Vera Didenko Flexmonster April 13, 2020

Hello, Cedric,
We would like to add that it is also possible to create a custom Flexmonster theme and use it in your project instead of the default one.
Recently, our team has added a custom theme builder app, making it easier to create your own Flexmonster themes:
You can add the needed additional styles to the end of the flexmonster.less file, build the custom theme and use the generated CSS files in your project. 
Such an approach allows keeping Flexmonster styles in one place.
Please let us know if this helps.
You are welcome to write to us if additional questions arise.
Kind regards,

Please login or Register to Submit Answer