フロントエンド(初心者)の私がfont-sizeを10px以下にするときに躓いたこと

今回引っかかったのは
以下の画像のようなテキストリンクを作ろうとしたときの話です。

引っかかった話

テキストの左にある矢印のアイコンを小さくしようとした。
最初の状態：

この矢印のclassにfont-size: 10px;を追加した。
小さくなった。
が、しかし10px以下にはできないらしい。。
もう少し小さくしたいと思い調べると
transform: scale(0.5);で小さくできるよという記事を見つけたので試しに
やってみたのだが、
何も変わらない。。。。。

transform: scale();について調べたら
inlineブロックだと適用されないみたい。。

試しにdisplay:block;
にして再度見てみると小さくなった！！

無理やりな方法かもしれないので何かアドバイスがあれば教えてください！