1. ryounagaoka

    Posted

    ryounagaoka
Changes in title
+FontAwesomeのiconをulやolのlist-styleに使う方法
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,29 @@
+FontAwesomeのiconをulやolのlist-styleに使いたくなることってありますよねー。
+残念ながら、list-styleに直接アイコンを使うことは出来ないのですが、以下の方法を使えば、同じようなことが実現できます。
+
+**HTML**
+
+```html
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
+(中略)
+<ul>
+ <li>人間失格</li>
+ <li>斜陽</li>
+ <li>ヴィヨンの妻</li>
+</ul>
+```
+
+**CSS**
+
+```css
+ul {
+ list-style: none;
+}
+li:before {
+ font-family: FontAwesome;
+ content: '\f054'; /* アイコンのunicode */
+}
+```
+**li:before**に設定する**content**にはバックスラッシュに続けて、FontAwesomeサイトのアイコン詳細ページ(上の例だと[ここ](http://fortawesome.github.io/Font-Awesome/icon/chevron-right/))に描かれてる**Unicode**の値を書きます。
+
+[デモ](https://jsfiddle.net/8t6fxdhk/)で実際にどうなるか御覧ください。