vue.js - 使用 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>

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

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

标签： vue.jsvuetify.jsfont-awesome

Answer 1

到目前为止，Vuetify 显然不支持Font Awesome的Stacked Icons样式方法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>