ionic3按钮和图标大小自定义

在我的项目中显示一半的图标和数字 . 我希望它显示在 ionic-card 的中间，图标和数字都变为小尺寸 .

html file

<ion-header>
    <ion-toolbar color="danger">
      <ion-buttons>
        <button ion-button navPop icon-only>
          <ion-icon ios="ios-arrow-back" md="md-arrow-back"></ion-icon>
        </button>
      </ion-buttons>
        <ion-title text-wrap>志愿者评选</ion-title>
    </ion-toolbar>
  </ion-header>

<ion-content>
  <div class="pins">
    <ion-card class="pin" *ngFor="let volunteer of volunteer">
      <img [width]="50" [height]="100" no-padding no-margin src="{{volunteer.Preview_image1}}">
      <div *ngIf="volunteer.title" class="volunteer-title">
        <small>{{volunteer.title}}</small>
      </div>
      <ion-item>
        <button ion-button small color="red" clear small icon-left (click)="like(post)">
        <ion-avatar item-start>
          <ion-icon name="heart-outline">{{volunteer.like_number}}</ion-icon>
        </ion-avatar>
        </button>
      </ion-item>
    </ion-card>
  </div>
</ion-content>

css file

page-volunteer-vote {

    .pins {
        column-count: 3;
        padding: 1px;
    }


    .pin {
        display: inline-block;
        text-align: center;
    }

    .card {
        margin-top: 5px;
    }

    ion-avatar {
        margin: 0 !important;
        padding: 0px;
        font-size: 2px;
    }


    .item ion-avatar img {
        width: 1vw;
        height: 1vw;
    }

    .item ion-avatar icon {
        width: 1px;
        height: 1px;
    }

    .volunteer-title {
        padding: 6px;
        border-bottom: 1px solid #eee;
        text-align: center;
        font-size: 10px;
    }


    // Media queries
    @media (min-width: 480px) {
        .pins {
            column-count: 3;
        }
        .item ion-avatar img {
            width:  7vw !important;
            height: 7vw !important;
        }
    }

    @media (min-width: 640px) {
        .pins {
            column-count: 4;
        }
        .item ion-avatar img {
            width:  5vw !important;
            height: 5vw !important;
            margin: 6px;
        }
    }

}

ionic info:

cli包：（/ usr / local / lib / node_modules）@ ionic / cli-utils：1.16.0 ionic（Ionic CLI）：3.16.0全局包：cordova（Cordova CLI）：7.0.1本地包：@ionic / app-scripts：2.1.3 Cordova平台：android 6.3.0 ios 4.4.0 Ionic Framework：ionic-angular 3.6.0系统：ios-deploy：1.9.2节点：v6.11.3 npm：3.10.10 OS：macOS Sierra Xcode：Xcode 8.3.3 Build版本8E3004b