【CSS】【グローバルメニューデザイン】2行目に英語を追加／アイコン画像を追加

グローバルメニューに、簡単にワンポイントを加えたい場合に、おすすめの方法をご紹介します。

Contents

完成図（画像）

まずは、それぞれの完成図になります。

アイコンを表示

このようなグローバルナビを作成していきます。

それぞれの詳しいコードと、少し解説をしていきます。

アイコンは、「Font Awesome」を使っているので、事前にFont AwesomeのCDNを<head>〜</head>の中に貼り付ける必要があります。

今回、Font Awesomeの導入方法は割愛させていただきます(><)

See the Pen globalnavi-text by shimamisa (@shimamisa) on CodePen.

ポイントは、CSSの「/* ナビゲーション */」以降からになります。

<span>を使う方法もありますが、今回は擬似要素を使っています。htmlを変える必要がないので楽だと思います。

また、リストによって英単語が違うので、<li>タグにそれぞれクラス名を付与しています。
「ホーム」なら、「navItemHome」というクラス名を付与しています。

See the Pen globalnavi-icon by shimamisa (@shimamisa) on CodePen.

こちらも同様に、ポイントはCSSの「/* ナビゲーション */」以降からになります。

<a>タグ（上記だと「.navItem a」です）に、「position: relative;」を指定し、擬似要素beforeに、「position: absolute;」を指定します。

また、リストによってアイコンが違うので、<li>タグにそれぞれクラス名を付与しています。
「ホーム」なら、「navItemHome」というクラス名を付与しています。

Font Awesomeのアイコンを擬似要素で使用する方法は、以下のようになります。

font-family: “Font Awesome 5 Free”;（Font Awesomeを使うため）
font-weight: 900;（表示するために必要）
content: “\f015”;（アイコンの種類。アイコンによって違います）

最後に、おまけです！

以上になります。
少しでもご参考になれば幸いです！