プログラミング

【画像つきで簡単】Font Awesomeでアイコンを作ろう

こんにちは、はがっち(@uzr4b)です。

今回はFont Awesomeの使い方をみていきましょう。とても簡単ですよ〜。

全行程を写真つきで紹介していくのでご安心ください。Font Awesomeを使いこなして素敵なサイトを作っていきましょう!

 

はがっち
はがっち
bootstrapのアイコンに飽きた人にも!

【画像つき】Font Awesomeでアイコンを作ろう

まずは「Font Awesome」で検索し、一番上に表示されているサイトをクリック

 

次に「Start Using Free」という方のボタンをクリックします。

お次は以下のようにコピーボタンがあるのでクリックします。「copied」と出たらオッケーです。

コピーした<link…>は自分のhtmlのhead部分に貼り付けておきます。

「Icons」という部分をクリックします。

さあ、あとは自分の使いたいアイコン名を探すだけですね!

一応僕の場合で軽く例を出しておきますね。

「Twitter」と検索します。

自分が使いたいアイコンをクリック。

下のようなページになりますので、「Click to Copy HTML」という部分をクリックします。

あとはこれを自分のhtml上に貼り付ければ完了です!

簡単ですよね!

bootstrapのアイコンよりもパターンが多いのでおすすめですよ〜

ぜひ使ってみてくださいね。

ちなみに僕は結構使ってみています。めっちゃいい感じにアイコン作れますよ。

現在学習しているサイトではこんな感じで使っていますね。

 

では今回はこの辺で〜。

COMMENT

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