header - change position of text/icon on ion-view title in Ionic -
i'm new @ ionic. i'm try setup navigation bar icon , text. code, have both:
<style> .title-image { height : 30px; width : 30px; } </style> <ion-view> <ion-nav-title> <img class = "title-image" src='./img/solologo.png'><span> aree di competenza</span> </ion-nav-title> </ion-view>
my problem icon up. how can change position of icon or of text? because found how move both, not 1 of them.
i'm new @ ionic, if there easy solution, me! :d
you can add css vertical-align:middle;
angular.module('ionicapp', ['ionic']) .config(function($stateprovider, $urlrouterprovider) { $stateprovider .state('onepage', { url: '/1', templateurl: 'onepage.html' }) $urlrouterprovider.otherwise("/1"); })
.title-image { height: 30px; width: 30px; vertical-align: middle; margin-top: -3px; } .title-text { }
<html ng-app="ionicapp"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>ionic template</title> <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> </head> <body> <ion-nav-bar class="bar-positive nav-title-slide-ios7" align-title="center"> <ion-nav-back-button class="button-icon ion-arrow-left-c"> </ion-nav-back-button> </ion-nav-bar> <ion-nav-view class="slide-left-right"></ion-nav-view> <script id="onepage.html" type="text/ng-template"> <ion-view title="onepage"> <ion-nav-title> <img class="title-image" src='./img/solologo.png'><span class="title-text"> aree di competenza</span> </ion-nav-title> <ion-content class="padding"> <h3>bla bla bla</h3> <p>bla bla bla</p> </ion-content> </ion-view> </script> </body> </html>
Comments
Post a Comment