動作環境

Windows 10 pro 64bit
- IE11
jQuery JavaScript Library v3.3.1
- jquery-3.3.1.js
Bootstrap v4.1.0
- bootstrap.css
- bootstrap.bundle.js
Font Awesome Free 5.0.8
- fontawesome-all.js

今回の現象

本家サイトの How to Use にも記載の通り、<i>タグを使って WEB ページにアイコンを埋め込みます。
HTML 内に input 系のタグと交互に入れておくとわかりやすいです。
そして IE11 で表示して、タブキーを押します。
すると、<i>タグの数だけ、フォーカスがどこかに消えてしまいます。
Chrome ではこの現象はおきませんでした。

普通の書き方

<i class="far fa-envelope"></i>
この書き方をするとフォーカスを持ってしまいます。

やってみたけどダメだった例

<i class="far fa-envelope" tabindex="-1"></i>
tabindex を指定してもフォーカスをスキップしてくれませんでした。

回避策

<i class="far fa-envelope" focusable="false"></i>
focusable を指定することで、SVGに展開後もフォーカスを制御できるようです。
false にすることでフォーカスを持たなくなります。
これで IE でも安心してフォームの中で SVG が使えます。