font-awesomeを使用する - ネットアンサー備忘録

font-awesomeを使用する

－2016年03月21日－

公式サイトよりソースをダウンロードする。
基本的な設定だけなら、使用するフォルダはfont一式とcssのfont-awesome.cssである。 cssをリンクさせる

`1`	`<link` `href="css/font-awesome.css"` `rel="stylesheet">`

あとは好きな場所に出力させるだけです。

`1`	`<i` `class="fa fa-flag"></i> fa-flag`

`2`	`<i` `class="fa fa-html5 fa-2x"></i> fa-flag`

:before :afterのように表示する場合は下記のように記述する font-awesomeアイコン一覧表上記より好みのアイコンを探します、cssで設定する場合は文字をcontentに記述しなければいけない。 ●例fa-flagの場合 fa-flagをfont-awesome.css内で検索する、そこでcontactの文字記述を確認をすることが出来る。

1<ul class="count">
2    <li>かうんと１</li>
3    <li>かうんと２</li>
4    <li>かうんと３</li>
5    <li>かうんと４</li>
6</ul>

1.count{
2    list-style:outside;
3    list-style-type:none;
4    background:#0F3;
5}
6 
7.count li{
8    border-bottom:3px double #ccc;
9    position:relative;
10    padding:10px 0;
11}
12 
13.count li:before{
14  content: "\f11d";
15  padding-right:5px;
16  color:#F00;
17  font-family: FontAwesome;
18  font-weight: normal;
19  font-style: normal;
20  display: inline-block;
21}
22.count li:after{
23  position:absolute;
24  right:15px;
25  content: "\f11d";
26  padding-left:5px;
27  color:#333;
28  font-family: FontAwesome;
29  font-weight: normal;
30  font-style: normal;
31  display: inline-block;
32}

font-awesome使い方まとめ
参考サイト（使い方）

作成したページ
作成したページ2（gotopへボタン作成とheadhesive設置）