1. ホーム
  2. cordova

[解決済み] ionic 2 でアイコンやボタンを大きくする方法

2022-02-17 07:41:54

質問

を作るにはどうしたらいいのでしょうか? buttonicon のサイズを大きくしています。

<ion-card>
  <ion-card-header>
    Explore Nearby
  </ion-card-header>

  <ion-list>
    <button ion-item>
      <ion-icon name="cart" item-left></ion-icon>
      Shopping
    </button>

    <button ion-item>
      <ion-icon name="medical" item-left></ion-icon>
      Hospital
    </button>

    <button ion-item>
      <ion-icon name="cafe" item-left></ion-icon>
      Cafe
    </button>
  </ion-list>
</ion-card>

解決方法は?

アイコンについて

ion-icon はフォントアイコンなので、本来はテキストなので、以下のSass/CSSで編集可能です。

    ion-icon {
        font-size: 20px; //Preferred size here
    }

ボタン

については button ionicには、サイズに影響を与えるいくつかのクラスが組み込まれています。 例えば

   <button ion-button large>Large</button>

   <button ion-button>Default</button>

   <button ion-button small>Small</button>

のデフォルトのSass変数を更新することもできます。 $button-round-padding の中で src/theme/variables.scss ファイルを、お好みのサイズに変更してください。 ボタンの詳細については、以下を参照してください。 こちら