CSS | アイコンとテキストのサイズ、余白、高さを調節する方法
Font Awesomeなどのフォントアイコンの色やサイズ、横に表示するテキストとの余白や高さを調節する方法を紹介しています。
アイコンとテキストのサイズ、余白、高さを調節する
フォントアイコンの色やサイズ、横に表示するテキストとの余白や高さを調節した表示サンプルとCSSのサンプルコードになります。
See the Pen CSS | Double border text by yochans (@yochans) on CodePen.
サンプルのフォントアイコンには「Font Awesome」の「home」を利用しています。
CDNは以下のコードになります。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">アイコンとテキストはpタグの中に配置、class名にはそれぞれタイプ別に「type1」「.type2」「type3」を指定しています。
<p class="type1"><i class="fa fa-home"></i>アイコンとテキストの間の余白を調節</p>
<p class="type2"><i class="fa fa-home"></i>アイコンの色を変更する</p>
<p class="type3"><i class="fa fa-home"></i>アイコンを拡大、テキストの高さを調節</p>アイコンとテキストの余白、アイコンの色、アイコンとテキストの高さ調節は全てアイコンのセレクターとなる「i」に対して指定しています。
アイコンとテキスト間の余白を広げる場合は、アイコン部分に対して「margin-right」を指定します。
/* アイコンとテキストの間の余白を調節 */
.type1 i {
margin-right: 5px;
}フォントアイコンの色を変更する場合はアイコンに「color」を指定する事で調節できます。
/* アイコンの色を変更する */
.type2 i {
color: #4169e1;
margin-right: 5px;
}フォントアイコンのサイズを拡縮したい場合はアイコンに「font-size」を指定する事で調節できます。
その際にアイコンとテキストのサイズが違うと位置調節が必要になります。
位置を調節する簡単な方法では、アイコンに「vertical-align」を指定して位置を上下に移動させて調節します。
/* アイコンを拡大、テキストの高さを調節 */
.type3 i {
color: #4169e1;
font-size: 30px;
margin-right: 4px;
vertical-align: -4px;
}