tabbarのアイコンをオリジナルのものに変更したい
いつもお世話になっております。
アイコンをオリジナルで作ってやろうと思っているのですが、カスタマイズの仕方が上手く分かりません。
当初考えていたのが、ionからダウンロードしたファイルを使って、自分で作成したiconを既存の使わないiconと置き換える予定だったのですが上手くいきませんでした。
ionのファイル→http://ionicons.com./
おそらく画像ではなく、フォントとして認識しているようなのですが。。。
アイコンのカスタマイズに詳しい方はどなたか教えていただけますでしょうか。
やり方はどのような風でもかまいませんが、作成したアイコンも別のアイコンと同様に色が変えられると嬉しいです。
(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="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>