にゅーてみ

アイコンフォントFont Awesomeの使い方

time 2015/06/09

アイコンフォントFont Awesomeの使い方

sponsored link

アイコンフォントとは

画像アイコンの代わりにテキストアイコンで表示するWEBフォントのことです。
テキストなので拡大・縮小もキレイにできますし、ちょっとしたアクセントにもなります。

awesome1

Font Awesomeを利用してwordpressをおしゃれにしていきましょう。
Font Awesomeはフォントをダウンロードしなくても使える便利なフォントです。

こんな感じのアイコンが使用できます。→ http://fontawesome.io/icons/

コードの取得

http://fontawesome.io/get-started/からコードをコピーしてきます。

そのコードをheader.php内のheadの中に記述します。
子テーマを作っている方は、子テーマ内にheader.phpを作りましょう。

上記コードはバージョンが変わると使えませんので、BOOTSTRAP CDNで確認してください。
Bootstrap CDNではhttps://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.cssと書かれていますので不要な部分は削除して、上記コードに差し替えてください。

使い方

アイコンフォントを適用させたい場所に

を追加します。
アイコンのコードはhttp://fontawesome.io/icons/のアイコンをクリックすると表示されます。

awesome3

メニューに付ける場合

wordpress管理画面→外観→メニューを開き、ナビゲーションラベルの部分へ入力します。

iconfont1

と記述すればホームのように表示されます。

CSSに追加したい場合

unicodeのコードを記述します。

例:リストの●をチェックマークに変える

と記述します。
※テーマ マテリアルを使用の場合です。お使いのテーマに合わせて変更してください。

  • リスト1
  • リスト2

こんな感じでチェックマークが表示されます。

こんな感じのものもあります。いろいろあって楽しくなってきますよ
 facebook
 twitter
 apple
 android
企業ロゴに関しては自己責任でお願いします。

sponsored link

down

コメントする




PC

スマホ・タブレット

ウェアラブル

ゲーム

wordpress

その他



sponsored link

QR Code Business Card