web-dev-qa-db-ja.com

マテリアルアイコンをマテリアライズのテキストに合わせる

最近、いくつかのフィールドを持つテーブルを含むプロジェクトの作業を開始しました。アイコンの横にMaterializeCSSを介してマテリアルデザインアイコンを追加します。画像を見て、あなたはそれを得るかもしれません

： example

私はすべてを試してみました、垂直整列、インライン（-ブロック）、フレックス、スタックオーバーフローで見つけられるすべて。いいえ、重複していません。本当に助けが必要です。ありがとうございました。

cssiconsmaterializegoogle-material-icons
13
MucaP

それがそれをする一つの方法です。もちろん、アイコンによって異なります。特定のfont-sizeそれはアイコンの高さに適合します。例：

#txt1{
 font-size:28px;
 line-height:24px;
}
#txt2{
 font-size:36px;
 line-height:24px;
}
#txt3{
 font-size:21px;
 line-height:24px;
}
.material-icons{
    display: inline-flex;
    vertical-align: top;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<span id="txt1">ID</span><i class="material-icons">info_outline</i>
</br>
<span id="txt2">ID</span><i class="material-icons">settings_cell</i>
</br>
<span id="txt3">ID</span><i class="material-icons">stay_primary_landscape</i>
12
Theodore K.

私は同じ問題を最も長い間抱えていましたが、私にとっては有効な解決策を見つけました。最初に、中心にしたいアイコンにカスタムクラスを与えます。次に、下部の垂直方向の配置と、横に配置されるテキストと一致するか、それより小さいフォントサイズを追加します。また、アイコンのクラス名にアイコンのサイズを指定しないでください。これがあなたのために働くかどうか私に知らせてください。

CSS：

.inline-icon {
   vertical-align: bottom;
   font-size: 18px !important;
}

HTML：

<p>"Your text goes here"<i class="inline-icon material-icons">warning</i></p>
23
darkknightsds

アイコンのマージン上部を任意のPOSITIVEまたはNEGATIVEの値に変更して、整列させることができます。例えば、

<i class="material-icons" style="margin-top:-10px">info_outline</i>
1
samson teoh

単にvertical-align:を負の値にします。

サンプルコード：

<i class="material-icons" style="vertical-align: -6px;">folder</i>
1
KirtJ

シンプル：

別のクラス（「右」）を合体させることができます：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<span id="txt1">ID</span><i class="material-icons right">info_outline</i>
</br>
<span id="txt2">ID</span><i class="material-icons right">settings_cell</i>
</br>
<span id="txt3">ID</span><i class="material-icons right">stay_primary_landscape</i>

material-iconsクラスでWordの「正しい」を確認できます。

0
VIRA

HTMLで次のことができます。

<span>ID</span> <i class="material-icons">info</i>

次に、CSSで、次のようにmaterial-icons classのスタイルを設定できます。

.material-icons {
    diplay:inline-flex;
    vertical-align:top;
}
0
Mwiza