More than 3 years have passed since last update.

Vuetifyでprepend-inner-iconで指定したFont Awesomeのアイコンだけ小さくしたい

Last updated at 2019-09-12Posted at 2019-09-12

Vuetifyでv-text-fieldにprepend-inner-iconを設定すると、material designのアイコンだとちょうどいいのにFont Awesomeだとバカでかいアイコンになってしまう現象がある。

標準がコレ

特に両者を併用したい場合などは目立ちすぎて仕方がない。
Font Awesomeのみ小さくしてみよう。

<style>
.v-input__icon--prepend-inner .fas {
  font-size:18px;
}
</style>

これでだいたい同じくらいの大きさになる。