Question

我使用Vuetify，但“辅助”颜色没有显示，如“ github”图标。这是我的代码：

  <div class="text-center">
    <v-bottom-sheet v-model="aPropos" inset>
      <template v-slot:activator="{ on: sheet }">
        <v-tooltip bottom>
          <template v-slot:activator="{ on: tooltip }">
            <v-btn
              class="mx-2"
              fab
              dark
              small
              v-on="{ ...tooltip, ...sheet }"
              color="secondary">
              <v-icon dark>mdi-help-circle-outline</v-icon>
            </v-btn>
          </template>
          <span>À propos</span>
        </v-tooltip>
      </template>
      <v-sheet class="text-center">
        <div class="my-3">
          <v-tooltip bottom>
            <template v-slot:activator="{ on }">
              <v-btn href="https://www.facebook.com/xxx" target="_blank" class="mx-2" color="primary" fab x-small dark v-on="on">
                <v-icon>mdi-facebook</v-icon>
              </v-btn>
            </template>
            <span>Facebook</span>
          </v-tooltip>
          <v-tooltip bottom>
            <template v-slot:activator="{ on }">
              <v-btn href="https://twitter.com/xxx" target="_blank" class="mx-2" color="primary" fab x-small dark v-on="on">
                <v-icon>mdi-twitter</v-icon>
              </v-btn>
            </template>
            <span>Twitter</span>
          </v-tooltip>
          <v-tooltip bottom>
            <template v-slot:activator="{ on }">
              <v-btn href="https://www.linkedin.com/in/xxx" target="_blank" class="mx-2" color="primary" fab x-small dark v-on="on">
                <v-icon>mdi-linkedin</v-icon>
              </v-btn>
            </template>
            <span>LinkedIn</span>
          </v-tooltip>
          <v-tooltip bottom>
            <template v-slot:activator="{ on }">
              <v-btn href="mailto:xxx" class="mx-2" color="secondary" fab x-small dark v-on="on">
                <v-icon>mdi-email</v-icon>
              </v-btn>
            </template>
            <span>Courriel</span>
          </v-tooltip>
          <v-tooltip bottom>
            <template v-slot:activator="{ on }">
              <v-btn href="http://xxx" target="_blank" class="mx-2" color="orange" fab x-small dark v-on="on">
                <v-icon>mdi-firefox</v-icon>
              </v-btn>
            </template>
            <span>Site internet</span>
          </v-tooltip>
        </div>
        <div class="my-3">Licence</div>
        <div class="my-3">
          <v-btn href="https://github.com/xxx" target="_blank" class="ma-2" tile outlined color="primary">
            <v-icon left>mdi-github</v-icon> Page GitHub du projet
          </v-btn>
        </div>
        <v-btn
          class="mt-6"
          text
          color="error"
          @click="aPropos = !aPropos"
        >Fermer</v-btn>
      </v-sheet>
    </v-bottom-sheet>
  </div>

结果如下：

“电子邮件”按钮应为浅蓝色，“ Page GitHub”旁边的徽标应为GitHub徽标，而不是被删除的电话。

由于我已经搜索了类似的问题，因此我在应用程序的顶部使用“ v-app”来包装所有内容（所有其他功能均正确显示），我很精确。我使用VueJS和Vuetify的最新版本（每次构建时，我都会获取最新版本）。

如果有人知道为什么我得到这个结果，那将是很棒的。预先感谢。

Answer 1

实际运行npm install @mdi/font --save-dev解决了“ GitHub”图标问题。颜色问题不是问题，令人惊讶的是他们选择了第二颜色。

Vuetify中不显示某些颜色，也不显示某些图标

1 个答案: