Home Ask Login Register

Developers Planet

Your answer is one click away!

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:

    .title-image {
        height : 30px;
        width : 30px;

        <img class = "title-image" src='./img/soloLogo.png'><span> Aree di competenza</span>

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


beaver February 2016

You can add to your CSS a vertical-align:middle;

angular.module('ionicApp', ['ionic'])

.config(function($stateProvider, $urlRouterProvider) {
  .state('onepage', {
    url: '/1',
    templateUrl: 'onepage.html'
    .title-image {
      height: 30px;
      width: 30px;
      vertical-align: middle;
      margin-top: -3px;
    .title-text {

<html ng-app="ionicApp">
    <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>

    <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-view class="slide-left-right"></ion-nav-view>

    <script id="onepage.html" type="text/ng-template">
      <ion-view title="onepage">
          <img class="title-image" src='./img/soloLogo.png'><span class="title-text"> Aree di competenza</span>
        <ion-content class="padding">
          <h3>Bla bla bla</h3>
          <p>Bla bla bla</p>

Post Status

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


Leave an answer

Quote of the day: live life

Devs Planet ®

2014-2016 www.devsplanet.com

Devs Planet © all rights reserved