【初心者でもわかる】文字のよこにアイコン画像を綺麗に設置する3つの方法（無料アイコンサイト紹介も）

どうも7noteです。文字とアイコンを横並びに並べる方法を紹介

無料で使える沢山のアイコンが増えたように思います。どこのサイトも見やすくまとまっていて、なにより沢山あるのがとても助かります。
そんなアイコンたちを綺麗に配置するにはCSSの知識がかかせません。

アイコンと文字を並べる方法を3つご紹介したいと思います。

方法①　背景画像に入れる

index.html

<p class="menu01">メニュー</p>

style.css

p.menu01 {
  background: url(./icon.png) no-repeat left center / auto 1em;  /* 背景画像でアイコンを入れる */
  padding: 0 0 0 1.5em;  /* アイコン画像分 + 適度な間隔 */
}

-メリット-
・文字幅に合わせて大きさを調整できる

-デメリット-
・枠をはみ出るような位置に配置したら切れる
・色は変えにくい

方法②　アイコンフォントを設置

※事前にheadでアイコンフォント(fontawesome)を読み込む必要あり！
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

index.html

<p class="menu02"><i class="fas fa-bars"></i>メニュー</p>

style.css

.menu02 i {
  margin-right: 0.5em;  /* 適度な間隔 */
}

-メリット-
・文字幅に合わせて大きさを調整できる
・色を変えるのが簡単

-デメリット-
・アイコンフォントを読み込む必要がある。

方法③　画像をposition指定する

index.html

<p class="menu03"><img src="./icon.png">メニュー</p>

style.css

.menu03 {
  position: relative; /* 基準位置とする */
}

.menu03 img {
  position: absolute; /* 相対位置とする */
  top: 4px;           /* 上から4pxの位置に指定 */
  left: -1.5em;       /* 左にマイナス1.5文字分の位置に指定 */
}

-メリット-
・枠をはみ出たところにも配置可能

-デメリット-
・文字サイズが変われば、画像サイズも変えないといけない
・色は変えにくい

まとめ

今回は大きく分けて3つの方法にしましたが、fontawesomeをposition指定して配置するような方法などもあります。
このように組み合わせて使うこともできますし、横並びだけでいいならフレックスボックスをつかう方法など様々な方法があります。

その時々で使い分けしたり、目的に合わせたり、周りのデザインに合わせて適切な方法で作成してください。

おまけ：無料で使えるおすすめアイコンサイト

・fontawesome（アイコンフォント）
http://fontawesome.io/icons/

・ICOOON MONO（アイコン画像集）
https://icooon-mono.com/
※日本語なので探しやすい！

・iconmaster（アイコン画像集）
https://iconmonstr.com/

ほかにもいろいろあると思うので探してみてください！

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ