我正在尝试在 Vuetify 中使用 float 操作按钮,但图标与按钮不对齐:
这是我安装 Vuetify 的方式:
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
import 'babel-polyfill' // Required by Vuetify for IE11-era browsers
Vue.use(Vuetify)
这是一个 CodePen,展示了我在做什么:https://codepen.io/anon/pen/vrXrYg?editors=1000
<div id="app">
<v-app>
<v-toolbar color="indigo" dark fixed app>
<v-toolbar-title>My App</v-toolbar-title>
</v-toolbar>
<v-content>
<v-container fluid fill-height>
<div id="my-vue-component">
<v-btn
fixed
fab
bottom
right
color="pink"
>
<v-icon>
microphone_off
</v-icon>
</v-btn>
</div>
</v-container>
</v-content>
</v-app>
</div>
最佳答案
您正在寻找的图标在官方 Material 设计图标文档中简称为 mic
。从 microphone_off
更改为 mic
在您的 codepen 中发挥了作用。
关于css - Vuetify 图标不在按钮内居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50745262/