使用 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

Stacked Icons Font Awesome[=29 的样式方法=] 到目前为止，Vuetify v-icon 显然不支持。好消息是您仍然可以仅使用常规 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>

我无法获得可接受的工作答案，因为我正在使用另一种方式加载很棒的字体图标。这似乎确实有效 - 但我建议为样式制作类。

更新2022-01-20 显然在某些时候 font awesome 将 stack 重命名为 layers 这样你就可以使用 vue font awesome library components

        <font-awesome-layers class="fa-2x mx-2">
          <font-awesome-icon :icon="['fad', 'cloud']" transform="shrink-8 left-2" />
          <font-awesome-icon :icon="['fas', 'ban']" class="red--text" />
        </font-awesome-layers>

使用 Vuetify 堆叠字体真棒图标

Stack Font awesome Icons with Vuetify

font-awesome

vue.js

vuetify.js