web-dev-qa-db-ja.com

AngularJSマテリアルアイコンのアイコンサイズを変更する

参照してからアイコンを宣言しました

<i class="material-icons">face</i>

しかし、アイコンのサイズを変更するにはどうすればよいですか？

公式サイトで https://design.google.com/icons/class="md-icon dp48"などのクラスを使用していることがわかりますが、私の場合は機能していません。

cssiconsmaterial-design
39
sreginogemoh

Githubのマテリアルデザインを読むことで、これらの役立つものが見つかりました。

 /* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

上記のコードから、マテリアルcssアイコンを単に変更またはオーバーライドできます。

サンプルコード：

<i class="material-icons md-18">face</i>

詳細 こちら

70
claudios

1回限りの場合は、通常、タグのfont-sizeにstyle =変更を追加します。しかし、長い話を簡単に言えば、CSSでより永続的なソリューションとしてアタッチするために、独自のサイズスタイルを定義する以外に、本当のトリックはありません。

<i class="material-icons" style="font-size: 50px">insert_invitation</i>
23
user1670304

scssを使用している場合

@mixin md-icon-size($size: 24px) {
  font-size: $size;
  height: $size;
  width: $size;
}

.md-icon-16 {
  @include md-icon-size(16px);
}

.md-icon-18 {
  @include md-icon-size(18px);
}

.md-icon-24 {
  @include md-icon-size(24px);
}

.md-icon-36 {
  @include md-icon-size(36px);
}
5
Kuncevič

Materialize Iconのサイズを変更する最良の方法は、iクラスに修飾子を追加することです。

<i class="material-icons small">menu</i>
<i class="material-icons medium">menu</i>
<i class="material-icons large">menu</i>

Materializeサイトのアイコンの下にあるアイコンサイズの変更に関する詳細をご覧ください。

2
M.A.Williams

通常のcssを使用できますが、インラインスタイルを次の方法でオーバーライドする必要があります。

font-size: 50px !important;

1
Patryk Ties

font-sizeプロパティを変更できます。「FONT ICON」なので、アイコンに反映されます

0
Ahmad Mayo

フォントサイズを設定してもアイコンサイズが小さくならない場合があります。 Coz、推奨フォントサイズは18、24、36、または48ピクセルです。

その特定のアイコンの「高さ」、「幅」、「行の高さ」属性を設定してみてください。これが役立つかもしれません。

0
Jagann

Check_circleのようなアイコンタグに関連付けられたサイズ属性があります

したがって、サイズ属性を使用して、アイコンのサイズを変更できます。

0
prat_bhan