ネットアンサー55備忘録

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

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

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

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

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

<ul class="count">
	<li>かうんと１</li>
	<li>かうんと２</li>
	<li>かうんと３</li>
	<li>かうんと４</li>
</ul>

.count{
	list-style:outside;
	list-style-type:none;
	background:#0F3;
}

.count li{
	border-bottom:3px double #ccc;
	position:relative;
	padding:10px 0;
}

.count li:before{
  content: "\f11d";
  padding-right:5px;
  color:#F00;
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  display: inline-block;
}
.count li:after{
  position:absolute;
  right:15px;
  content: "\f11d";
  padding-left:5px;
  color:#333;
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  display: inline-block;
}

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

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