CODEWITHSUNDEEP
cssfont-awesome
Raghav Kanwal
Raghav Kanwal

Reputation: 177

Add Font Awesome icon after <hr> using CSS

I'm looking to style a Horizontal Rule with CSS. I've done this so far:

http://tinkerbin.com/vdzgAZ9q

However, I want to use the 'icon-star' from Font Awesome instead of the § symbol.

Could someone tell me how this would be done?

Thanks!

Upvotes: 9

Views: 8531

Answers (2)

G.G.
G.G.

Reputation: 674

You don't need the hr element at all.

There you go: http://jsfiddle.net/Qc6J4/

Upvotes: 3

ErDmKo
ErDmKo

Reputation: 603

First step is download fonts from fortawesome
Second include them in to css. Be careful with the paths to the font files:

@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;
}

And at last, replace content rule for hr selectior from "§" to "\f005"

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

Upvotes: 14

Related Questions