ionic3按钮和图标大小自定义

Question

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

html文件

<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文件

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;
        }
    }

}

离子信息：

  

cli包：（/ usr / local / lib / node_modules）

     

@ ionic / cli-utils：1.16.0

     

离子（离子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

     

离子骨架：离子角3.6.0

     

系统：

     

ios-deploy：1.9.2

     

节点：v6.11.3

     

npm：3.10.10

     

操作系统：macOS Sierra

     

Xcode：Xcode 8.3.3 Build版本8E3004b