font-awesome

Pocket

CSSのafter, before疑似要素でFont Awesomewebフォントを使うメモ。

通常利用

 icon-chevron-right <i class="icon-chevron-right"></i>

icon-chevron-right

CSSのafter, befoter疑似要素で利用

font-awesome.cssでicon-chevron-rightを検索する。

.....
.....
.icon-chevron-left:before {
    content: "\f053";
}
.icon-chevron-right:before {
    content: "\f054";   # icon-chevron-rightに対応するコード
}
.....
.....

リストマークのスタイル

.icon-list li:after {
   content: "\f054";            # 調べた文字コード
   font-family: FontAwesome;    # フォントファミリーはFontAwesome
}

実例

  • リスト項目
  • リスト項目

コメント

No comments yet.

コメントの投稿

改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。

 


人気記事 はてなブックマーク

この日記のはてなブックマーク数