I want customize directive ionTabNav

ionic-v1
1

Hi everyone,
Because my project need use images replace for current icon font.
can we customize “directive ionTabNav” for use images as icons? who can help?

current tab-nav

<ion-tabs class="tabs-positive tabs-icon-only">
        <ion-tab title="Home" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
          <!-- Tab 1 content -->
        </ion-tab>
        <ion-tab title="About" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline">
          <!-- Tab 2 content -->
        </ion-tab>
        <ion-tab title="Settings" icon-on="ion-ios7-gear" icon-off="ion-ios7-gear-outline">
          <!-- Tab 3 content -->
        </ion-tab>
      </ion-tabs>

i want change to

  <ion-tabs class="tabs-positive tabs-icon-only">
            <ion-tab title="Home" img-on="img-link.png" img-off="img-link.png">
              <!-- Tab 1 content -->
            </ion-tab>
            <ion-tab title="About" img-on="img-link.png" img-off="img-link.png">
              <!-- Tab 2 content -->
            </ion-tab>
            <ion-tab title="Settings" img-on="img-link.png" img-off="img-link.png">
              <!-- Tab 3 content -->
            </ion-tab>
          </ion-tabs>

output will display

<div class="tabs">
  <a class="tab-item">
    <img src="img-link.png">
    <span>title</span>
  </a>
  <a class="tab-item">
    <img src="img-link.png">
    <span>title</span>
  </a>
  <a class="tab-item">
    <img src="img-link.png">
    <span>title</span>
  </a>
</div>
2

Hi @hoangloi ,

With out create a directive you can do.
Take a look…
write css in tabs.htnl page–

.ion-home:before,.ion-checkmark:before{
content: "";
}
       .ion-home{
                background-image: url('img/about_active.png');
            }
            .ion-checkmark{
                background-image: url('img/about.png');
            }
    <ion-tab title="" icon-on="ion-home" icon-off="ion-checkmark" href="#/tab/home"> 
<ion-nav-view name="tab-home">
<//ion-tab>
3

@shashikant i want use {{value}} in controller.js for background? with your solution it’s seem not solve.

4

For me it is working…

5

@shashikant i know this solution work well with fix image. i have example :
controller.js

$scope.aboutIcon 		= "img/128/data/add_database-128.png";

main.html

<style>
    .ion-home:before,.ion-checkmark:before{
    content: "";
    }
           .ion-home{
                    background-image: url('{{aboutIcon}}');
                }
                .ion-checkmark{
                    background-image: url('{{aboutIcon}}');
                }
</style>
        <ion-tab title="" icon-on="ion-home" icon-off="ion-checkmark" href="#/tab/home"> 
    <ion-nav-view name="tab-home">
    </ion-tab>

not working