『Font Awesome』で文字アイコンをHTMLに取り入れよう!


どうもこんにちは、よっしーです(=゚ω゚)ノ   今回はHTMLコードのみで画像アイコンみたいなものを導入する方法を書きました。

「画像みたいなアイコン」ってなんぞや

(;´・ω・)ウーン、説明が難しいです。 実際に載せてみましょう!

  こちらのTwitterアイコンは画像ではなく、文字に色を付けたものです!

画像より軽いので良いですね〜(^ω^)〜

では、この文字をHTMLで表示する手順を説明いたします。もちろん、WordPressでもできます。

手順①

headタグ内に以下の記述をする

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

これでCSSが読み込まれます。自分のウェブサーバーにCSSを設置してもOKです。

 

手順②

Font Awesome(http://fortawesome.github.io/Font-Awesome/icons )から載せたいアイコンを選択します。

今回はMicrosoft Windowsのロゴにしてみます。

検索フォームから「Windows」を検索・クリックします。

 

手順③

FontAwesome - Microsoft Windows

ページに記載されている<i>タグをコピーします。

 

手順④

アイコンを載せたいページの場所にコピーしたコードをペースト(Ctrl+V)します。これで完了です!

色付けはfontタグやstyle、CSSで行なってください。


いかがでしたでしょうか。

この作業をWordPressで行なうときはテーマに同梱されているheader.phpに先述したタグを挿入しておいてください。

また、今後も多くのアイコンがFont Awesomeに追加されていく予定です。

公式サイトのフォームにメールアドレスを入力するとアイコンの更新通知が受け取れます。この機会に登録してみてはいかがでしたでしょうか?


 

関連サイト

 

Font Awesome Icons

Get Started – Font Awesome

Yossi1114

どうもこんにちは、このサイトの管理人のよっすぃーです\(へωへ)/

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です