【SWELL】グローバルナビ（ヘッダーメニュー）にアイコンを入れてブログをおしゃれにしよう！【Font Awesome】

今回、自分がやっている方法はSWELLで「Font Awesome」を使っています。

SWELL公式サイトにも利用方法が書いてあるので参照してください。

Font Awesomeを使えるように設定する

SWELL設定から使えるようにする

画像の様に、WordPress設定画面→SWELL設定→FontAwesome→CSSで読み込む→変更を保存

使いたいアイコンを探す。

FontAwesome公式サイトから自分が使いたいアイコンを探します。使いたいアイコンが見つかったら、コードが表示されるので、コードをコピーします。今回はWi-Fiのマークを例にして設定していきます。

Wi-Fiのコードは <i class=”fas fa-wifi”></i> になります。

メニューにコードを入れる

外観→メニュー→グローバルナビに設定してある画面

<i class=”使いたいアイコンコード”></i>メニュー名と入力してください。

fa-fwと入れると見栄えが良くなる

このままでも問題ないのですが、アイコンのサイズが違うものがあるのでテキストの開始位置がずれてしまう場合があります。そこで、アイコンコードの後にfa-fwと入れることでテキストの間が等間隔に揃うようになり、見栄えも良くなります。

SWELLって？という方に

この記事をみてSWELLをはじめて聞いた方もいるかもしれません。当ブログは有料テーマSWELLを利用しています。ここ最近ブロガーにとても人気になっているテーマです。SWELLについての記事もまとめていますので、気になる方はチェックしてみてください。

あわせて読みたい

【レビュー】SWELLを10ヵ月利用して分かったこと。副業、アフィリエイトに超最適！ 今副業で大注目されているブログですが、コロナウイルスの影響もあり2021年には更にブログの需要が増えることが予想されます。ブログを始める人ははてなブログやWordPre...