好きなアイコンを自分のサイトで使える「Webアイコン」
Font Awesomeというサイトを使えば数千種類のアイコンを自分のサイトで表示できます。
step
1使いたいアイコンを選ぶ
step
2ソースをコピー
step
3テキストモードでサイトに貼り付け
サイトに貼り付けると左のようにアイコンが表示される。デフォルトは黒色
注意
バージョン４とバージョン５があるが、バージョン5だとサイトで表示できないことが多いのでバージョン4を使う
色をつけたい場合はCSSで設定が必要
アイコンに色をつけたい場合は別途CSSで設定が必要です。
step
1ワードプレスにログイン→外観→カスタマイズ→追加CSSを選び書きを貼り付け保存をクリック
|
1 2 3 4 5 6 |
.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」をつける
×
|
1 |
<i class="fa fa-times my-red" aria-hidden="true"></i> |
○
|
1 |
<i class="fa fa-circle-o my-green" aria-hidden="true"></i> |
