web-dev-qa-db-ja.com

ionic 2でアイコンとボタンを大きくする方法

休憩コードでbuttonおよびiconサイズを大きくするにはどうすればよいですか：

<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>
cordovatypescripticonsionic2
17
RSA

アイコン

ion-iconsはフォントアイコンであるため、基本的にテキストであるため、次の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>

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

55
Deanmv

Iconの場合でも、イオンアイコンタグには大小を使用できます。これは私が使用していた方法です

<ion-icon name="arrow-forward" item-end small></ion-icon>

5
Prashant

私のIonic 4アプリでは、次のアプローチを採用しました。 * .scssファイル内：

ion-icon { zoom: 1.5 }

もちろん、ズーム値はニーズによって異なります。
これが誰かを助けることを願っています。 o /

2
Nowdeen