ナビゲーションとツールバーそれぞれに独自の画像を以下の感じで表示させたいと思います。
ただ方法とサイズがいまいち分からずおそらく強引(と思われる)で対応しみてました。まずはテンプレート
<ion-header> <ion-navbar color="base"> <ion-title text-center class="nlogo"> <img src="./assets/img/header_logo.png" /> </ion-title> <button ion-button menuToggle end> <ion-icon name="apps"></ion-icon> </button> </ion-navbar> </ion-header> == <ion-footer> <ion-toolbar color="base"> <ion-buttons class="toolbar" padding-left padding-right> <button ion-button icon-only> <img src="./assets/img/t1.png" /> </button> <button ion-button icon-only> <img src="./assets/img/t2.png" /> </button> <button ion-button icon-only> <img src="./assets/img/t3.png" /> </button> <button ion-button icon-only> <img src="./assets/img/t4.png" /> </button> <button ion-button icon-only> <img src="./assets/img/t5.png" /> </button> </ion-buttons>
そしてscss
.nlogo { padding: 0 0 0 31px; img { vertical-align: middle; width: 30px; height: 30px; } } .platform-ios .nlog { padding: 0; } .toolbar { display:flex; img { width: 26px; height: auto; } }
もっとちゃんとした方法があるんでしょうが、見つかるまではこれで暫定対応。
各アイコンのサイズはchromeのDeveloper toolからioniconsのサイズを抽出しました
iphoneのionic viewで確認した問題なかったのでとりあえず大丈夫かと・・。
ちなみにナビゲーションバーですがandroidとwindowsは左右にアイコンがあると残りのスペースでセンタリングをしてしまうため中心からズレるのでpaddingで位置を修正。