使用 Vuetify 堆叠字体真棒图标

Question

我正在尝试按照此处的说明堆叠图标https://fontawesome.com/v5.15/how-to-use/on-the-web/styling/stacking-icons但在我的项目中我使用的是vuejs和vuetify因此，我的图标位于v-icon元素内。

这是我尝试过的：

<div class="fa-stack fa-2x">
   <v-icon>fas fa-camera fa-stack-1x</v-icon>
   <v-icon>fas fa-ban fa-stack-2x</v-icon>
</div>

它只是一个接一个地显示图标而不是堆叠。

关于我缺少什么的任何想法？ 或者有可能吗？

Answer 1

到目前为止，Vuetify v-icon显然不支持Font Awesome的Stacked Icons样式方法。 好消息是您仍然可以使用常规的 HTML 标签（例如 div、i、span、..等）来实现此功能。

我附上了 2 个 Vuetify 按钮的示例。 其中一个是使用堆叠图标实现的，另一个是使用 Vuetify v-icon实现的。

 new Vue({ el: '#app', vuetify: new Vuetify(), })

 <link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.5.1/dist/vuetify.min.js"></script> <div id="app"> <v-app id="inspire"> <v-row align="center" justify="space-around"> <v-btn> search <span class="ml-2 fa-stack fa-1x"> <i class="fas fa-square fa-stack-2x"></i> <i class="fas fa-search fa-stack-1x fa-inverse"></i> </span> </v-btn> <v-btn> search <v-icon class="ml-2">fas fa-search</v-icon> </v-btn> </v-row> </v-app> </div>

Answer 2

<div style="position: relative;" class="mx-2">
  <v-icon style="position: absolute; top: 8px; left:8px" dense color="white">
    $cloud
  </v-icon>
  <v-icon color="red" x-large>
    $ban
  </v-icon>
</div>

由于我正在使用另一种方式加载字体真棒图标，因此我无法获得公认的答案。 不过这似乎确实有效 - 但是我建议为 styles 制作课程。