title: How to set active icon colour in Sencha Touch 2.2 Tabpanel app
body: <p>I've been having difficulty changing the active colour of an icon in my tabpanel item in Sencha Touch 2.2. I've tried lots of variations of CSS and SASS but have not managed to change it. The CSS I have tried:</p>
  
  <pre><code>.x-tabbar.x-docked-bottom .x-tab-active {
  color: #000000;
  background-color: #000000;
  
  }
  
  .x-tab-active {
  background-color: #000000;
  color: #000000;
  }
  </code></pre>
  
  <p>I've also tried setting the active colour in SASS, but this doesn't seem to work either. The only bit of CSS that seems to have that blue in it is this bit:</p>
  
  <pre><code>.x-tabbar-light .x-tab-active .x-button-icon::before {
  color: #1da2ff;
  }
  </code></pre>
  
  <p>...but when I try setting that to black, nothing happens! Anyone have any ideas how I can change it??</p>
  
  <p><img src="https://i.stack.imgur.com/vt1Xd.jpg" alt="Screengrab of Touch 2.2 Project"></p>
  
  <p>EDIT: I tried the first suggestion changing the CSS to this:</p>
  
  <pre><code> .x-tabbar-light .x-tab-active .x-button-icon {
   background-color: #000000;
   }
  </code></pre>
  
  <p>...but this is what I see:</p>
  
  <p><img src="https://i.stack.imgur.com/9RPzo.jpg" alt="Image 2"></p>