如何在自己的CSS中使用字体真棒？

Question

我正在使用bootstrap和Font Awesome.在我正在研究的自定义css类中,我试图包含Font Awesome图标而不是使用图像.这是Font Awesome之前的代码.

.data .close {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  background: url(../img/close.png) top right no-repeat;
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
}

.next {
  right: 0;
  float: right;
}

.next:hover {
  background: url(../img/next.png) right 48% no-repeat;
}

这是我使用Font Awesome的代码,显然不起作用.图标不显示.知道我做错了什么吗？

.data .close {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  font-family: FontAwesome
  content: "\f00d";
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
}


.next {
  right: 0;
  float: right;
}

.next:hover {
  font-family: FontAwesome
  content: "\f054";
}

HTML标题

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>test</title>
  <link rel="stylesheet" href="./font-awesome/css/font-awesome.css">
</head>

....

....

这是我正在努力的一个小提琴.

Answer 1

你可以使用:before或:after伪来实现.在这里阅读更多相关信息http://astronautweb.co/snippet/font-awesome/

将您的代码更改为此

.lb-prev:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
   text-decoration: none;
}

.lb-prev:before {
    font-family: FontAwesome;
    content: "\f053";
    font-size: 30px;
}

为其他图标做同样的事情.您可能还想调整图标的颜色和高度.无论如何,这是帮助的小提琴希望

Answer 2

Web字体的精神是尽可能使用缓存,因此您应该使用CDN版本<head></head>而不是自己托管:

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

此外,请确保您在上述行之后加载CSS ,否则您的自定义字体CSS将无效.

参考:Font Awesome入门