Как использовать шрифт Awesome в собственном CSS?

Я использую 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>

....

....

вот скрипка того, над чем я работаю.

Ответы на вопрос(3)

Ваш ответ на вопрос