FontAwesomeの画像をうまく表示できません

Question

font-Awsomeの画像がうまく適用されていないように思えます。

　　<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/regular.css" integrity="sha384-z3ccjLyn+akM2DtvRQCXJwvT5bGZsspS4uptQKNXNg778nyzvdMqiGcqHVGiAUyY" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/fontawesome.css" integrity="sha384-u5J7JghGz0qUrmEsWzBQkfvc8nK3fUT7DCaQzNQ+q4oEXhGSx+P2OqjWsfIRB8QT" crossorigin="anonymous">
    <link rel="stylesheet" href="dotinstall.css">
    <link rel="stylesheet" href="normalize.css">

<header class="flex">
      <div class="header_left_column">
        <h1>Dotinstall Pane</h1>
        <p>ドットインストールを見ながら
          コーディングができるAtomパッケージ
        </p>
        
        <a href="#" class="header_left_link">詳細を見る <i class="fas fa-external-link-alt"></i></a>
      </div>
      <div class="header_right_column">
        <img src="img/top.png" width="700px">
      </div>
      
    </header>

*{
  box-sizing:border-box;
}
header{
  background-image:url(img/bg.png);
  padding:40px 0 0 50px;
}
.flex{
  display:flex;
}
.header_left_column{
  margin-left:62px;
}
.header_right_column{
  margin-left:200px;
}
.header_left_column h1{
  font-size:50px;
  color:#fff;
  margin-bottom:0;

}
.header_left_column p{
  color:#fff;
  white-space: pre-line;
  line-height:1.5;
  font-size:18px;
  margin-bottom:50px;
}
.header_left_link{

  text-decoration:none;
  color:orange;
  display:inline-block;
  opacity:0.9;
  background-color:#FFFAF0;
  width:100%;
  border-radius:6px;
  text-align:center;
  padding:20px;
}

.main_contents{
  margin:0 auto;
}

.header_left_link:hover{
  opacity:1; 
}

上記コードの「<a href="#" class="header_left_link">詳細を見る <i class="fas fa-external-link-alt"></i></a>」ここの部分に適用しています、「<i class="fas fa-external-link-alt"></i>」こちらの画像なのですが、画像が切れて？しまっているように思えます。
下記の画像は、「「<a href="#" class="header_left_link">詳細を見る <i class="fas fa-external-link-alt"></i></a>」」の部分になります。

ですが、実現したい形としましては、下記のようにしたいです。

同じfontAosomeのアイコンのリンクを使用していると思うのですが、何故画像がうまく設定できないのかが分かりません。
どなたかご解決方法を教えていただけましたら幸いです。

Comments

[退会済みユーザー]

多分外部CSSを読み込んでいると思うのでそちらもご提示ください

[newyee]

CSSの方、追記しました。

Answer 1

よくわからないですがfontawesomeの外部CSSは

    <link rel="stylesheet" href="https://use.
.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

だけじゃダメなのでしょうか？
サンプル

Comments

[newyee]

導入用のスクリプトを読み込ませる際に、「All」ではなく「regular」を選択してしまっていたからかもしれません。解決できました。ありがとうございました。

[退会済みユーザー]

なるほど
こちらも勉強になりました。
ありがとうございます。