浦和の小さなweb屋さん

ボタン内のアイコンフォントがどんな大きさでも最適な位置に表示する

ボタン内にアイコンフォントを使用している場合、アイコンフォントによっては親要素そのままのフォントサイズだとやたら小さかったり、使い方によってはもっともっと大きくしたかったり、色々なケースがあると思います。

ただアイコンフォントにfont-sizeを指定しただけだと、アイコンだけ上に寄ったり、続くテキストと上下位置が合わなくなり、ガタガタすることに。

親要素にrelative、アイコンに高さを与えabsolute、上下位置の距離を0、さらにmargin:auto

  1. 親要素(この場合はボタン様ボックス)にposition:relative;
  2. 子要素であるアイコン(上下位置調整した対象)にposition:absolute;して、さらに高さを与え、
  3. 親要素からの距離は、top:0;bottom:0;に指定
  4. アイコンのmargin:0;

でキレイに上下中央に並びます。どんな文字サイズでもOK!
変に計算して、top位置からの距離を書くよりスマートです。

検証がてらCODEPENに作ってみました。

See the Pen Enlarged icon Font vertical position Centering by delico (@delico) on CodePen.dark

共有
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Posts published: 44
Copyrights © idew. All Rights Reserved.