Webアイコン　4千種類のアイコンから選んで使える

投稿日：2018年10月16日

好きなアイコンを自分のサイトで使える「Webアイコン」

Font Awesomeというサイトを使えば数千種類のアイコンを自分のサイトで表示できます。

step
1使いたいアイコンを選ぶ

○アイコン

step
2ソースをコピー

ソースをコピーして貼り付ける

step
3テキストモードでサイトに貼り付け

　サイトに貼り付けると左のようにアイコンが表示される。デフォルトは黒色

注意

バージョン４とバージョン５があるが、バージョン5だとサイトで表示できないことが多いのでバージョン4を使う

色をつけたい場合はCSSで設定が必要

アイコンに色をつけたい場合は別途CSSで設定が必要です。

step
1ワードプレスにログイン→外観→カスタマイズ→追加CSSを選び書きを貼り付け保存をクリック

.my-red {color: #ff3333}
.my-blue {color: #0000ff}
.my-skyblue {color: skyblue}
.my-orange {color: #fecb81}
.my-green {color: #7CB342}
.my-gray {color: gray}

.my-red {color: #ff3333}

.my-blue {color: #0000ff}

.my-skyblue {color: skyblue}

.my-orange {color: #fecb81}

.my-green {color: #7CB342}

.my-gray {color: gray}

step
2アイコンのコードに「my-色コード」をつける

例：fa fa-timesの後ろに「my-red」をつける

<i class="fa fa-times my-red" aria-hidden="true"></i>

1	<i class="fa fa-times my-red" aria-hidden="true"></i>

○

<i class="fa fa-circle-o my-green" aria-hidden="true"></i>

1	<i class="fa fa-circle-o my-green" aria-hidden="true"></i>

河野　裕

株式会社フォーカスワン　代表取締役。

2011年6月からSEOとアフィリエイトのコンサルティング及びサイト運営をしています。

SEO対策で色んな業者にお金を払い色々やってみた結果、自分で勉強してSEO対策をするのが一番結果が出ることに気が付いて、現在に至ります。

日々Googleのアルゴリズム変更に翻弄されながらも、人生を楽しんでいます。

皆様のお役に立てる情報を発信できるように頑張ります。

会社概要・運営サイト一覧