CSS で、Font Awesome を使ってリストのアイコンイメージを変える方法

たとえばこのサイトの右のカテゴリリストのように、通常の箇条書きドット（・）からフォルダアイコンに変更したい場合は、CSS から以下のように変更する。

li:before {
  position: absolute;
  top: 0;
  left: 0;
  font-family: 'FontAwesome';  /* フォントを FontAwesome に設定 */
  content: '\f07b';            /* フォルダアイコンを表す         */
  color: #fab100;              /* 色は黄色                     */
}

li  {
  position: relative;    /* この指定がないとアイテムが改行してしまう        */
  padding-left: 20px;    /* Fontawesome のアイコンの大きさ分、           */
                         /* 箇条書きアイテムの左にパディングを入れる        */
  list-style-type: none; /* これがないと箇条書きドット（・）を表示してしまう */
}

広告