awesome-vue在同一页面上以极其相似的情况显示一个图标，但不显示其他图标

Question

我有一个导航栏，带有三个链接：“登录”，“注册”，“语言”。这是我的Vue很棒的设置：

import Icon from 'vue-awesome/components/Icon'
import 'vue-awesome/icons'
import Modal from '@/components/Modal.vue'
import Sidebar from '@/components/Sidebar.vue'
import Uploads from '@/components/Uploads.vue'
import CartDropdown from '@/components/CartDropdown.vue'
import Login from '@/lib/auth/components/Login.vue'
import Register from '@/lib/auth/components/Register.vue'

export default{
  name: 'app',
  components: {
    Icon,
    Modal,
    Sidebar,
    Uploads,
    CartDropdown,
    Register,
    Login
  },

在这里我添加图标。请注意，这些是相同的图标，但这仅用于测试。第一个图标将更改为sign-in。

    <a href="#" class="nav-link inline" @click="modal = 'login'">{{$t('account.login')}}</a>
    <Icon name="language"/>           
    <a href="#" class="nav-link inline" @click="modal = 'register'">{{$t('account.register')}}</a>
  </li>
  <li class="nav-item nav-link dropdown" @click="dropdownOpen = false" :class="{'show': langDropdown}">

    <a class="nav-link dropdown-toggle user-nav" @click="langDropdown = !langDropdown" style="color: white; cursor: pointer;">{{selectedLanguage}}</a>
    <Icon name="language"/>
    <div @click="langDropdown = !langDropdown" class="navbar-toggler">
      <icon name="globe" scale="2" class="icon"></icon>
    </div>

第一个图标不起作用。看：

可能是什么问题？