CSSでブログ記事のタイトル横にアイコンを追加する方法

<div class="box-title">
  <span class="icon-check">✔️</span>
  <h2>タイトルテキスト</h2>
</div>

この例では、``タグ内にチェックアイコンを、`

`タグ内にタイトルテキストを配置しています。アイコンは`✔️`を使用していますが、実際のアイコンを使う場合は、アイコンフォントを使用することが一般的です。 CSSでアイコンをタイトルの隣に配置する方法

次に、このアイコンをタイトルの隣に配置するためのCSSを設定します。アイコンをタイトルの左または右に配置するには、CSSの`display`プロパティを活用します。

.box-title {
  display: flex;
  align-items: center;
}

.icon-check {
  margin-right: 8px; /* アイコンとタイトルの間隔 */
}

ここで使用している`display: flex;`は、`box-title`クラスの中にある要素を横並びにするために使います。`align-items: center;`は、アイコンとタイトルの縦位置を中央に揃えます。

FontAwesomeなどのアイコンフォントを使用する方法

チェックアイコンやびっくりマークアイコンをよりカスタマイズ可能にするために、FontAwesomeのようなアイコンフォントを使うこともできます。FontAwesomeを利用することで、さらに豊富なアイコンを簡単に使うことができます。

まず、FontAwesomeをインポートする必要があります。以下のように、HTMLの``タグ内にリンクを追加します。

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">

その後、アイコンをHTML内に``タグを使って挿入します。

<i class="fas fa-check-circle"></i>

<div class="box-title">
  <i class="fas fa-check-circle icon-check"></i>
  <h2>タイトルテキスト</h2>
</div>

.box-title {
  display: flex;
  align-items: center;
}

.icon-check {
  margin-right: 10px; /* アイコンとタイトルの間隔を調整 */
  font-size: 24px; /* アイコンのサイズを調整 */
}