Добавить значок шрифта Awesome после <hr> с помощью CSS

Я ищу стиль горизонтального правила с CSS. Я сделал это до сих пор:

http://tinkerbin.com/vdzgAZ9q

Однако, вместо символа § я хочу использовать "icon-star" из шрифта Awesome.

Может ли кто-нибудь сказать мне, как это будет сделано?

Спасибо!

Ответ 1

Первый шаг - загрузить шрифты из fortawesome
Во-вторых, включите их в css. Будьте осторожны с путями к файлам шрифтов:

@font-face {
  font-family: 'FontAwesome';
  src: url('../font/fontawesome-webfont.eot?v=3.0.1');
  src: url('../font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
    url('../font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
    url('../font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight: normal;
  font-style: normal;
}

И, наконец, замените правило содержания для hr selectior от "§" до "\ f005"

hr:after { content: "\f005";}