时间戳

首页 > 解决方案 > 如何在 vue 应用程序的 bootstrap-select 组件中使用 fontawesome-icon 组件？

vue.js - 如何在 vue 应用程序的 bootstrap-select 组件中使用 fontawesome-icon 组件？

问题描述

我想在我的 vue 应用程序的 b-form-select-option 组件中使用 font-awesome-icon 组件。

  <b-form-select id="icon-select" v-model="selected">
    <b-form-select-option :value="coffee"><font-awesome-icon :icon="['fas', 'coffee']" /></b-form-select-option>
    <b-form-select-option :value="user-secret"><font-awesome-icon :icon="['fas', 'user-secret']" /></b-form-select-option>
  </b-form-select>

<script>
    import { library } from '@fortawesome/fontawesome-svg-core'
    import { faUserSecret, faCoffee } from '@fortawesome/free-solid-svg-icons'
    library.add(faUserSecret, faCoffee);
    
      export default  {
        name: 'rooms-vue',
    
        props: [],
        data () {
          return {
            selected: null,
        }
      }
</script>

代码看起来（压缩）如上。图标未显示。我错过了什么？

到现在为止，我发现了例如这个线程： Font Awesome Icons not loading as expected in Option List (But are when selected)

但据我了解，这不是 fortawesome 规范中建议的方式。

标签： vue.jsfont-awesomebootstrap-vue

解决方案

推荐阅读