使用CSS在<hr />之后添加Font Awesome图标

时间:2013-03-09 12:23:41

标签: css font-awesome

我希望用CSS设置水平规则的样式。到目前为止我已经这样做了:

http://tinkerbin.com/vdzgAZ9q

但是,我想使用Font Awesome中的'icon-star'而不是§符号。

有人可以告诉我这是怎么做的吗?

谢谢!

2 个答案:

答案 0 :(得分:15)

第一步是从 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";}

答案 1 :(得分:3)

您根本不需要hr元素。

你去了:http://jsfiddle.net/Qc6J4/