Steph8 February 2016

change position of text/icon on ion-view title in Ionic

I'm new at Ionic. I'm try to setup a navigation bar with an icon and a text. With this code, I 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 is the icon is too up. How can I change the position only of the icon or only of the text? Because I only found how to move both, but not only 1 of them.

I'm new at Ionic, so if there is an easy solution, say it to me! :D

Answers


beaver February 2016

You can add to your CSS a 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>
  

Post Status

Asked in February 2016
Viewed 3,599 times
Voted 14
Answered 1 times

Search




Leave an answer