【旧版】Font Awesome 4入門 (全7回)
最新版のレッスンはこちらから »
【最新版】Font Awesome 5入門 (全13回)
さまざまなアイコンとして使えるウェブフォントであるFont Awesomeについて、基本的な使い方を学んでいきます。
このレッスンでは Font Awesome 4.3.0 を使用しています。
-
#01 Font Awesomeとはなにか？ (02:31)
- 概要
- 公式サイト
- 必要となる知識
- 注意事項
- ひな形ファイルの作成
-
#02 はじめてのFont Awesome (02:29)
- 利用するための準備
- アイコンの表示
- アイコンの大きさの変更
-
#03 アイコンのスタイルを変えてみよう (02:12)
- スタイルの変更
-
#04 リストで使えるクラスを使ってみよう (02:24)
- fa-fw
- fa-ul
- fa-li
-
#05 アイコンを回転させてみよう (02:36)
- fa-rotate-xxx
- fa-flip-xxx
- fa-spin
- fa-pulse
-
#06 枠線､左右寄せのためのクラスを使おう (01:36)
- pull-right/pull-left
- fa-border
-
#07 アイコンを重ねてみよう (02:43)
- fa-stack
#01 Font Awesomeとはなにか？
2015年3月12日
補足情報 必要となる知識について
このレッスンを受講するにあたっては以下を参考にしてみてください。
・HTML入門 (全24回)
http://dotinstall.com/lessons/basic_html_v3
・CSS入門 (全18回)
http://dotinstall.com/lessons/basic_css_v2
・CSS3入門 (全19回)
http://dotinstall.com/lessons/basic_css3
・HTML入門 (全24回)
http://dotinstall.com/lessons/basic_html_v3
・CSS入門 (全18回)
http://dotinstall.com/lessons/basic_css_v2
・CSS3入門 (全19回)
http://dotinstall.com/lessons/basic_css3
#02 はじめてのFont Awesome
2016年12月30日
補足情報 公式サイトの変更について
レッスン収録時には CDN の埋め込みタグが記載されていましたが、現在ではメールアドレスの登録が必要となっているようです。
ですので、
- メールアドレスを登録して独自の埋め込みタグを取得する
もしくは、
- ソースをダウンロードしてサイトと同じディレクトリ内に設置する
のいずれかの方法で準備をするようにしてみてください。
補足情報 Font Awesome の公式サイトについて
Font Awesome の公式サイトは2017年3月10日現在、以下の URL に変更になっています。
・Font Awesome
http://fontawesome.io/