How to adjust custom side menu icon horizontal alignment

Ionic Framework ionic-v3
1

how to adjust custom side menu icon vertical alignment .hw can i do this.attach my side menu screen shot.Capture

please help me anyone.

2

Hi,
you have to use css for it.

3

So,please give me a sample of code please.

4

I do not know how your HTML code looks, so open e.g. in Chrome browser developer tools and locate you menu icon. Then you can use all css stuffs to edit it.

5

@mcihak this is my HTML code.

<ion-menu [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
      <img width="25px" height="25px" src="{{p.icon}}" md="md-key"/>
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
1 Like
6

So you can easily use:

ion-menu{
   ion-content{
      ion-list{
         img{
            position: relative;
            top: 3px;
         }
      }
   }
}
7

How did you add that custom icon?
{ title: ‘Dashboard’, component: HomePage, icon: '‘assets/imgs/home.png’} ,
??

8

Yes. You can do like this-> { title: ‘Dashboard’, component: HomePage, icon: '‘assets/imgs/home.png’} ,