FontAwesome表示されない

毎度使わしていただいている
FontAwesomeのアイコンが表示されません。

いつもと違うのは
gem "font-awesome-rails"のみbundle installして
application.scssに下記importさせると

 @import 'font-awesome-sprockets';
 @import 'font-awesome';

Sass::SyntaxError
File to import not found or unreadable: font-awesome-sprockets.
Load paths:
というエラーが出るため
gemfileにgem 'font-awesome-sass'
追記しました。Sass::SyntaxError は解消しましたが
アイコン表示が四角表示でうまく読み込めていません原因はなんでしょうか？
教えてください。

試したこと
font-family: "Font Awesome 5 Free";をcssで当ててみましたが変わりません。

ファイル名Gemfile

gem "font-awesome-rails"
gem 'font-awesome-sass'

ファイル名application.scss

 @import "reset";
 @import "contacts/index";
 @import "contacts/new";
 @import "slick-theme";
 @import "slick";
 @import 'font-awesome-sprockets';
 @import 'font-awesome';

ファイル名index.html.erb

<div class="skills-wrapper">
    <div class="skill-box">
      <i class="skill-icon fas fa-code"></i>
      <div class="skill-title">CODING</div>
      <i class="skill-icon fab fa-html5"></i>
    </div>
</div>