HTMLでFontAwesomeのアイコンを使いたい

###実現したい事
HTMLでこのサイトのようなアイコンを表示させたかったのですが、ソースをコピペしても画面に　＞　しか表示されませんでした。最初はFontAwesomeをダウンロードしてないからかと思い、サイトのURLに従ってダウンロードしたのですが、それでも結果は変わりませんでした。どうすればFontAwesomeのアイコンが表示されるのか分かる方、回答お願いします。
###ソース

HTML
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>ボタン</title>
6<style>
7.button {
8  display: inline-block;
9  width: 40px;
10  margin: 0 5px;
11  line-height: 40px;
12  text-align: center;
13  background-color: #fff;
14  background-image: linear-gradient(-45deg, #e7e7e7 50%, #fff 50%, #fff);
15  background-image: -webkit-linear-gradient(-45deg, #e7e7e7 50%, #fff 50%, #fff);
16  border-radius: 50%;
17  box-shadow: 0 0 3px #222;
18  font-size: 16px;
19  text-shadow: inset 0 1px 1px #222;
20  cursor: pointer;
21}
22</style>
23<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
24</head>
25<body>
26<div id="audio_button">
27  <span id="stop" class="button"><i class="icon-step-backward"></i></span>
28  <span id="play" class="button"><i class="icon-play"></i></span>
29</div>>
30</body>
31</html>

###実行結果

###試したこと
FontAwesomeを使うには

行動規範の内容に同意します

回答2件

ベストアンサー

Font Awesome のバージョンが変わり、指定方法が変わっています。

HTML
1<div id="audio_button">
2  <span id="stop" class="button"><i class="fas fa-step-backward"></i></span>
3  <span id="play" class="button"><i class="fas fa-play"></i></span>
4</div>

【icon-step-backward: Font Awesome Icons】
https://fontawesome.com/v3.2.1/icon/step-backward/

【step-backward | Font Awesome】
https://fontawesome.com/icons/step-backward?style=solid

投稿2018/04/30 15:59

kei344

総合スコア69398

が表示されるのは、

html
1</div>>
2</body>

</div>の後の>が余分です。

iconについては、「fontawesome step-backward」で検索したら出てきました。

html
1<!DOCTYPE html>
2<html>
3
4<head>
5  <meta charset="UTF-8">
6  <title>ボタン</title>
7  <style>
8    .button {
9      display: inline-block;
10      width: 40px;
11      margin: 0 5px;
12      line-height: 40px;
13      text-align: center;
14      background-color: #fff;
15      background-image: linear-gradient(-45deg, #e7e7e7 50%, #fff 50%, #fff);
16      background-image: -webkit-linear-gradient(-45deg, #e7e7e7 50%, #fff 50%, #fff);
17      border-radius: 50%;
18      box-shadow: 0 0 3px #222;
19      font-size: 16px;
20      text-shadow: inset 0 1px 1px #222;
21      cursor: pointer;
22    }
23  </style>
24  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg"
25    crossorigin="anonymous">
26</head>
27
28<body>
29  <div id="audio_button">
30    <span id="stop" class="button">
31      <i class="fa fa-step-backward" aria-hidden="true"></i>
32    </span>
33    <span id="play" class="button">
34      <i class="fa fa-play" aria-hidden="true"></i>
35    </span>
36  </div>
37</body>
38
39</html>