Font Awesomeのアイコンにテキストを重ねたときに文字が縦書きになる

Bloggerの記事内で、Layering, Text, and Counters | Font AwesomeのようにFont Awesomeのアイコンにテキストを重ねたいです。

しかし、2文字以上を重ねようとすると、文字が縦書きになってしまいます。

html
1<p>
2  <span class="fa-layers fa-fw">
3    <i class="fas fa-square fa-4x" style="color:green;"></i>
4    <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-10 right-16" style="font-weight:900;">TO</span>
5  </span>
6</p>

なお、最初貼ったリンク先にあるFont AwesomeサイトのソースコードをBloggerにコピペしても表示が崩れます。(もちろん、Font Awsomeのサイトでは正常に表示されています。)

これを普通に横書きにしたいのですが、どうすれば良いか見当もつけられないのでご教お願いします。

Bloggerはウィジェットバージョン2、テンプレートバージョン3を使用しています。「HTMを編集」よりいくつかcssを追加してはいますが、div,span,i,pタグに対しては何もしていません。
Font AwesomeはCDNでFree版のバージョン5.14.0を使用しています。(5.0.4以降の古いバージョンもいくつか試してみましたができませんでした。)

よろしくお願いします。