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

  • URLをコピーしました!
アイコンがあると一気におしゃれになりますね!

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

なるべくわかりやすく解説していきます。

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

目次

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

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

FontAwesomeの設定です。

画像の様に、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...

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

あなたの生活をプラスにします。ポイ活(楽天経済圏)、格安SIM、資産運用、お金に関する事や医療・福祉の資格を活かした情報などをSNSやブログで幅広く発信しています。

コメント

コメント一覧 (1件)

コメントする

目次