I want to change the tabbar icon to the original one.

Thank you for your continuous support.
I'm thinking of making an original icon, but I don't know how to customize it.

At first, I was planning to replace the icon I created with the icon I didn't use using the file I downloaded from ion, but it didn't work.
File in → http://ionicons.com./
It seems that they recognize it as a font, not an image...

Could you tell me who is familiar with customizing icons?

I don't care how you do it, but I would appreciate it if you could change the color of the icon just like other icons.

(function(){
    ons.bootstrap()
})();

<head>
    <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/onsenui.css"rel="stylesheet"/>
    <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/onsen-css-components.css"rel="stylesheet"/>
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/js/angular/angular.min.js"></script>
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/js/onsenui.min.js"></script>
</head>
<body>


    <ons-page>
      <ons-tabbar var="tabbar">
        <ons-tabbar-item
            icon="home"
            label = "home of fontawsome"
            page="homeNavi.html"
            active="true"></ons-tabbar-item>
        <ons-tabbar-item
            icon="ion-ios-location"
            label = "ion location"
            page="commentNavi.html"
            </ons-tabbar-item>
        <ons-tabbar-item
            icon="original"
            label="Original icon"
            page="settingNavi.html"
            </ons-tabbar-item>
      </ons-tabbar>
    </ons-page>




  <ons-template id="homeNavi.html">
    <ons-navigator var="homeNavi" page="page1.html">
    </ons-navigator> 
  </ons-template>

  <ons-template id="commentNavi.html">
    <ons-navigator var="commentNavi" page="page2.html">
    </ons-navigator> 
  </ons-template>

  <ons-template id="settingNavi.html">
    <ons-navigator var="settingNavi" page="page3.html">
    </ons-navigator> 
  </ons-template>

  <ons-template id="page1.html">
    <ons-toolbar>
      <div class="center">Page1</div>
    </ons-toolbar>
    <div style="text-align:center">
      <br of >
      <ons-buttoning-click="homeNavi.pushPage('page1-2.html')">
        Push New Page
      </ons-button>
    </div>
  </ons-template>

  <ons-template id="page2.html">
    <ons-toolbar>
      <div class="center">Page2</div>
    </ons-toolbar>
    <div style="text-align:center">
      <h1>Page2</h1>
    </div>
  </ons-template>

  <ons-template id="page3.html">
    <ons-toolbar>
      <div class="center">Page3</div>
    </ons-toolbar>
    <div style="text-align:center">
      <h1>Page3</h1>
    </div>
  </ons-template>

  <ons-template id="page1-2.html">
    <ons-toolbar>
      <div class="left"><ons-back-button>Back</ons-back-button></div>
      <div class="center">New Page</div>
    </ons-toolbar>
    <div style="text-align:center">
      <br of >
      <ons-buttoning-click="homeNavi.popPage();">
        Pop Page
  	  </ons-button>
    </div>
  </ons-template>  
</body>

monaca image font

2022-09-30 14:42

1 Answers

It seems that you can remove the icon and label from ons-tab and write html underneath.
I think css will do something about color change and position adjustment.

ons.bootstrap();

.my-icon{
  background-color:#000;
}

.active>.tab-bar-inner>.my-icon{
  background-color:#eff;
}

<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/css/onsen-css-components.css"rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/css/onsenui.css"rel="stylesheet"/>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/js/onsenui.min.js"></script>

<body>
  <ons-tabbar var="tab">
    <ons-tab page="home.html" label="Home" icon="ion-home" active="true">
    </ons-tab>
    <ons-tab page="comments.html">
      <div class="my-icon"><img src="alt="Original Icon"/>>/div>
    </ons-tab>
    <ons-tab page="tags.html" label="Tags" icon="ion-ios-pricetag">
    </ons-tab>
    <ons-tab page="settings.html" label="Settings" icon="ion-ios-cog">
    </ons-tab>
  </ons-tabbar>
</body>

<ons-template id="home.html">
  <ons-toolbar>
    <div class="center">Home</div>
  </ons-toolbar>

  <p style="padding-top:100px;color:#999;text-align:center">Home Page Contents</p>
</ons-template>

<ons-template id="comments.html">
  <ons-toolbar>
    <div class="center">Comments</div>
  </ons-toolbar>
  
  <p style="padding-top:100px;color:#999;text-align:center">Comment Page Contents</p>
</ons-template>

<ons-template id="tags.html">
  <ons-toolbar>
    <div class="center">Tags</div>
  </ons-toolbar>
  
  <p style="padding-top:100px;color:#999;text-align:center">Tags Page Contents</p>
</ons-template>

<ons-template id="settings.html">
  <ons-toolbar>
    <div class="center">Settings</div>
  </ons-toolbar>
  
  <p style="padding-top:100px;color:#999;text-align:center">Settings Page Contents</p>
</ons-template>

2022-09-30 14:42

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656