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

992 ワード
Vue.js vuetifyjs FontAwesome Vue.js テキストリンク

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

標準がコレ

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

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

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