How to change <ons-tab> icon colors?

[ChunYu]

Dear Masters,

I have a question please help me,

I use code:

<ons-tabbar id=“myTabbar” position=“auto” class=“yourFooterClass”>
<ons-tab page=“html/pending_tasks.html” label=“TEST” icon=“fa-home” active></ons-tab>
<ons-tab page=“tab2.html” label=“TEST” icon=“fa-calculator” s></ons-tab>
<ons-tab page=“tab2.html” label=“TEST” icon=“fa-address-book”></ons-tab>
<ons-tab page=“tab2.html” label=“TEST” icon=“address-card”></ons-tab>
</ons-tabbar>

How to blue color active icon change “red” (or other color) colors ?

Thank you

[emccorson]

The easiest way to do this is by creating a custom theme with Onsen UI Theme Roller: https://onsen.io/theme-roller/

Check the ‘Customize’ box and then scroll down to the Tabbar component. On the right-hand pane, you will see ‘Component Variables’ and under that heading is ‘tabbar highlight text’. Changing ‘tabbar highlight text’ will change the colour.

Once you are finished, click ‘Download’ and then import the downloaded files into your Onsen UI project.

[milos12345]

This post is deleted!

[emccorson]

No need to touch any of the files in node_modules.

First unzip the onsen-css-theme.zip file you downloaded from Theme Roller. Put the CSS files in a directory in your source directory (for example, www/styles).

In your index.html, you should have a line something like:

<link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">

Change the href attribute to point to the onsen-css-components.css file that you just put in your source directory. For example, if you put the CSS files in www/styles and your index.html file is in www change it to:

<link rel="stylesheet" href="styles/onsen-css-components.css">

Then add another line to link the theme.css file:

<link rel="stylesheet" href="styles/theme.css">

That should be it working. If you are still having problems, can you provide a tree of your project structure so I can see which files are where?

[emccorson]

Oh, I just realised from your other post that you might be using React.

If you are using React, instead of using the link tag, you should import your CSS styles however you already import CSS styles for React.

[milos12345]

This post is deleted!

[emccorson]

It’s hard to know without seeing the files, but it looks like the components directory contains CSS only for specific components. In that case you want the styles in the components directory to override the ones in onsen-css-components.css. So you should still import theme.css and onsen-css-components.css as normal, but then after the onsen-css-components.css import, import each file in the components directory. (I think.)

[milos12345]

This post is deleted!