お客様サイトで今まで画像でやっていた電話番号の部分を
テキスト+アイコンフォント(fontawesome)で
やることになった。
googleフォント
(1)元画像のテキストは小塚のLあたりの細くてシンプルな文字
googleフォントで探す
google font
(2)Roboto Slab Light 300 が近いのでこれに決定。
(3)左から2番目のアイコンをクリックするとQuick Useページが出てくる。
(4)wightwを選び、3のAdd this code to your website:のタグを
コピーして自分のHTMLに張り付ける。
(5)そのフォントにしたいcssに
4のIntegrate the fonts into your CSS:をコピーして貼る
font-family: ‘Roboto’, sans-serif;
Font Awesomeの使い方その３
- (1)ダウンロードするfontawesome ダウンロード
- (2)階層変えずにcssフォルダー中身とfontsフォルダーを本番HTMLにコピペする。
- (3)htmlからcssリンクを貼る
- (4)使いたいアイコンを探すアイコン一覧
- (5)クリックして開いたページにあるhtmlをコピーする(例)<i class=”fa fa-flag”></i> fa-flagfa-flag
使いたい箇所に貼る
大きさを変更したい場合は下記を使う
.fa-lg
.fa-2x
.fa-lg {
font-size: 1.3333333333333333em;
line-height: 0.75em;
vertical-align: -15%;
}
.fa-2x {
font-size: 2em;
}
.fa-3x {
font-size: 3em;
}
.fa-4x {
font-size: 4em;
}
.fa-5x {
font-size: 5em;
}[/css]
アイコン表示幅を統一させる
.fa-fw
[css].fa-fw {
width: 1.2857142857142858em;
text-align: center;
}
[/css]
リストで利用する場合
.fa-ul(ulに付ける)
.fa-li(liに付ける)
padding-left: 0;
margin-left: 2.142857142857143em;
list-style-type: none;
}
.fa-ul > li {
position: relative;
}
.fa-li {
position: absolute;
left: -2.142857142857143em;
width: 2.142857142857143em;
top: 0.14285714285714285em;
text-align: center;
}[/css]
ボーダーで囲う
.fa-border
[css] .fa-border {padding: .2em .25em .15em;
border: solid 0.08em #eeeeee;
border-radius: .1em;
}[/css]
他にも以下の使い方があります。リンクページ参照。
回り込み
回転アニメーション
角度（90°毎の回転）と反転
アイコンの重ねによる組み合わせ