>原因は拡張子がall.jsではなくall.cssに直したことで解決したものだと思うのですが、この二つの違いがいまいち理解できません。
FontAwesomeは、アイコンを表示させるライブラリで、
JavaScriptのjsファイルではSVGという画像形式でアイコンを表示（バージョン5から）し、CSSではウェブフォントというフォントファイルを使ってアイコンを表示させます。
目的は同じアイコンを表示させることで、アイコンを表示させる方法や利用しているファイル形式が異なります。

次に、jsファイルを使った時に動作がうまいくいかない原因について説明します。

このfontawsomeのバージョン5以降のjsファイルでアイコン表示させた場合、
ブラウザのデベロッパーツール「Element」で確認するとわかるのですが、
<svg> ....（アイコンの情報が記載） ... </svg>
<!-- <i class="fa fa-angle-right slider__nav slider__next js-slide-next" aria-hidden"true"=""></i> -->
と、index.htmlで記載していたiタグの要素をjsファイルがコメントアウトして非表示にします。
その代わり、svgタグの要素を挿入してアイコンを表示させます。

そして、app.jsはここではfontawesomeのall.jsより先に実行されています。
よって、app.jsの
$('.js-slide-next').on('click', function(){
や
app.jsの$('.js-slide-prev').on('click', function(){
では、そのjs-slide-nextクラスの「iタグ」に対してイベントを設定していたことなります。

したがって、その状態でブラウザの矢印アイコンをクリックすると、
ブラウザのデベロッパーツール「Element」のDOM構成からわかるように「svgタグ」の要素をクリックしたことになり、そのsvg要素にはイベントを設定していないため、何も動かなかったということです。

よって対策方法は、FontAwesomeの公式サイトに記載があります（英文ですが）。
https://fontawesome.com/how-to-use/on-the-web/using-with/jquery
具体的には、htmlのheadタグ内の
<script src="https://use.fontawesome.com/releases/v5.6.3/js/all.js"></script>
のscriptタグの中にこの属性
data-auto-replace-svg="nest"
を書いて、
<script src="https://use.fontawesome.com/releases/v5.6.3/js/all.js" data-auto-replace-svg="nest"></script>
としましょう。
そうすれば、iタグを残したまま、iタグの中にsvgタグ要素を入れる形でアイコンを表示させることができます。ブラウザのデベロッパーツール「Element」で確認してください。
このDOM構成で、ブラウザの矢印アイコンをクリックすれば、
iタグがクリックされたことになり、iタグに設定されていたクリックのイベントが動いて画像が正しくスライドします。


たしかに、この問題はcssとjsと拡張子を変えたためアイコン生成のDOMの仕組みが変わったことが原因ですが、
jsのスクリプトが実行されるタイミングについて理解が十分でないことも、つまずいた原因の一つだと考えています。

ここでそのタイミングについても解説します。
jsのスクリプトが実行されるタイミングは、下記３つがあり、いつ行うか指定することができます。
1.そのjsファイルが読み込まれた直後に実行される
2.画像以外のDOMの読み込みが終えたら実行する
3.すべての要素、つまり画像などがすべてロードされたら実行する
2と3のタイミングで実行するには、jsファイルのコードのはじめと終わりに決まりのフレーズを書く必要があります。
その記載方法は下記の記事が参考になります。
https://qiita.com/8845musign/items/88a8c693c84ba63cea1d

このjsのスクリプトが実行されるタイミングの違いを理解した上で先程の問題を考え直します。
今回はapp.jsの書き方からわかるように、1のタイミングで処理するように動いていて、
app.js->FontAwesomeのall.js
の順番で処理されていたわけです。そのため、クラスjs-slide-nextで設定したセレクタに齟齬が生じました。
一方で、もし2か3の方法で書いた場合には、
FontAwesomeのall.js->app.js
の順で処理されます。
この場合、
<script src="https://use.fontawesome.com/releases/v5.6.3/js/all.js"></script>
のdata-auto-replace-svg属性をつけなくても、
app.jsの$('.js-slide-next').on('click', function(){
の$('.js-slide-next')のセレクタには、Fontawsomeのall.jsで生成され、コメントアウトされるiタグのクラスを引き継いで同じjs-slide-nextクラスを持つsvgタグの要素が選ばれます。
したがって、このsvgタグの要素に画像スライドのクリックイベントを設定されることになります。
その結果、ブラウザの矢印アイコンをクリックすると、svg要素がクリックされ、そこにイベントがうまく設定できているので正しくスライドが動きます。


>また以下のサイトでFontAwesome 5 は公式のCDNでCSS配布をやめるらしいということが書かれています。
>https://tadtadya.com/html-css-fontawesome-quit-official-cdn/
>実際にfontawesomeの公式サイトに行ってもCDNの配布ページを見つけることができませんでした。
>現場では一体どこからCDNを手に入れているのでしょうか？
このブログに記載の通りjsファイルは配布を続けられます。
先程の解説で、cssでjsでもやっていることは同じでアイコンの表示であり、jsファイルも問題なく使える以上心配する必要はありません。
cssよりjsの方が負荷が少なくブラウザに表示できるため、ユーザーフレンドリのため一本化しようとしています。悪い情報ではありません。

>調べた所cdnにはいくつか種類があり、拡張子も(all.css,all.min.css,brands.min.css)など複数ある状態です。
これはアイコンの種類です。全てを使えるallを選んでおけば良いと思います。

したがって、公式ページで登録などしなくても利用できる
https://use.fontawesome.com/releases/v5.10.3/js/all.js
の「5.10.3」のバージョンの数字を状況に応じて選び、
全てのアイコンが利用できるall.jsファイルを使うようにしておけば、基本的に問題なく使い続けられるでしょう。
ただし、バージョン変更時には先程のscriptタグの属性について書いたように、細かいルールが変更されることがあります。
その場合は、FontAwesomeの公式や他の方が書いた関連記事を読むようにしてください。

分かりやすい解説ありがとうございます。
FontAwesomeについてや、今までなんとなくおまじないのように使っていた$(function(){ ... } の理解が深まりました。

回答でもありましたが、

>>jsのスクリプトが実行されるタイミングについて理解が十分でないことも、つまずいた原因の一つだと考えています。
自分の理解が中途半端なことが原因だと思うのでしっかり本質を理解できるように練習や勉強など日々努力していきたいと思います。