

いつもお世話になっております。  
アイコンをオリジナルで作ってやろうと思っているのですが、カスタマイズの仕方が上手く分かりません。

当初考えていたのが、ionからダウンロードしたファイルを使って、自分で作成したiconを既存の使わないiconと置き換える予定だったのですが上手くいきませんでした。  
ionのファイル→<http://ionicons.com./>  
おそらく画像ではなく、フォントとして認識しているようなのですが。。。

アイコンのカスタマイズに詳しい方はどなたか教えていただけますでしょうか。

やり方はどのような風でもかまいませんが、作成したアイコンも別のアイコンと同様に色が変えられると嬉しいです。

[code]

    (function() {
        ons.bootstrap()
    })();
[/code]

[code]

    <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="fontawsomeのhome"
                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="オリジナルの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">Page 1</div>
        </ons-toolbar>
        <div style="text-align: center">
          <br />
          <ons-button ng-click="homeNavi.pushPage('page1-2.html')">
            Push New Page
          </ons-button>
        </div>
      </ons-template>
    
      <ons-template id="page2.html">
        <ons-toolbar>
          <div class="center">Page 2</div>
        </ons-toolbar>
        <div style="text-align: center">
          <h1>Page 2</h1>
        </div>
      </ons-template>
    
      <ons-template id="page3.html">
        <ons-toolbar>
          <div class="center">Page 3</div>
        </ons-toolbar>
        <div style="text-align: center">
          <h1>Page 3</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 />
          <ons-button ng-click="homeNavi.popPage();">
            Pop Page
         </ons-button>
        </div>
      </ons-template>  
    </body>
[/code]


CC BY-SA 3.0
2015-06-18T03:33:18.230
11456
2016-10-06T10:29:52.170
7724
question
monaca 画像 font
tabbarのアイコンをオリジナルのものに変更したい


`ons-tab`から`icon`と`label`を削除して配下にhtmlを書けばいけるようです。  
色変更, 位置の調整等はcssで何とかなるかなと思います。

[code]

    ons.bootstrap();
[/code]

[code]

    .my-icon {
      background-color: #000;
    }
    
    .active > .tab-bar-inner > .my-icon {
      background-color: #eff;
    }
[/code]

[code]

    <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="オリジナルアイコン" /></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>
[/code]


CC BY-SA 3.0
2015-06-18T08:03:18.210
11468
2015-06-18T08:03:18.210
3516
11456
answer