带有Vuetify的栈字型酷炫图标

Question

我试图像这里解释的那样堆叠图标，但在我的项目中，我使用的是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

叠层图标造型方法的字体Awesome显然不支持到目前为止的v-icon。好消息是，您仍然可以使用常规的HTML标记(如div、i、span、..etc )来实现这个特性。

我已经附上了一个例子，两个武帝纽扣。其中一种是用叠加的图标实现的，另一种是用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显然在某一点上字体超赞重命名堆栈为层，这样您就可以使用vue字体可怕的库组件。

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