【问题标题】:Font Awesome Icons not loading as expected in Option List (But are when selected)选项列表中的字体真棒图标未按预期加载(但在选择时)
【发布时间】:2020-11-18 11:49:35
【问题描述】:

我有一个使用 bootstrap-vue 的选项列表,如图所示:

在选择窗口中看起来不错,但打开下拉菜单时并非所有图标都显示。选择图标后,它会显示:

即螺栓显示 [],但选择时:

图标栏代码:

<template v-slot:cell(icon)="row">
    <b-form-select v-model="row.item.icon" class="fa">
        <b-form-select-option value="anchor"> &#xf13d; anchor</b-form-select-option>
        <b-form-select-option value="angle-double-up"> &#xf102; angle-double-up</b-form-select-option>
        <b-form-select-option value="angle-double-down"> &#xf103; angle-double-down</b-form-select-option>
        <b-form-select-option value="angle-double-left"> &#xf100; angle-double-left</b-form-select-option>
        <b-form-select-option value="angle-double-right"> &#xf101; angle-double-right</b-form-select-option>
        <b-form-select-option value="angle-up"> &#xf106; angle-up</b-form-select-option>
        <b-form-select-option value="angle-down"> &#xf107; angle-down</b-form-select-option>
        <b-form-select-option value="angle-left"> &#xf104; angle-left</b-form-select-option>
        <b-form-select-option value="angle-right"> &#xf105; angle-right</b-form-select-option>
        <b-form-select-option value="archive"> &#xf187; archive</b-form-select-option>
        <b-form-select-option value="asterisk"> &#xf069; asterisk</b-form-select-option>
        <b-form-select-option value="at"> &#xf1fa; at</b-form-select-option>
        <b-form-select-option value="automobile"> &#xf1b9; automobile</b-form-select-option>
        <b-form-select-option value="balance-scale"> &#xf24e; balance-scale</b-form-select-option>
        <b-form-select-option value="ban"> &#xf05e; ban</b-form-select-option>
        <b-form-select-option value="bank"> &#xf19c; bank</b-form-select-option>
        <b-form-select-option value="bar-chart"> &#xf080; bar-chart</b-form-select-option>
        <b-form-select-option value="barcode"> &#xf02a; barcode</b-form-select-option>
        <b-form-select-option value="battery-full"> &#xf240; battery-full</b-form-select-option>
        <b-form-select-option value="bell"> &#xf0f3; bell</b-form-select-option>
        <b-form-select-option value="binoculars"> &#xf1e5; binoculars</b-form-select-option>
        <b-form-select-option value="bolt"> &#xf0e7; bolt</b-form-select-option>
        <b-form-select-option value="book"> &#xf02d; book</b-form-select-option>
        <b-form-select-option value="bookmark"> &#xf02e; bookmark</b-form-select-option>
        <b-form-select-option value="briefcase"> &#xf0b1; briefcase</b-form-select-option>
        <b-form-select-option value="building"> &#xf1ad; building</b-form-select-option>
        <b-form-select-option value="calculator"> &#xf1ec; calculator</b-form-select-option>
        <b-form-select-option value="bullseye"> &#xf140; bullseye</b-form-select-option>
        <b-form-select-option value="bullhorn"> &#xf0a1; bullhorn</b-form-select-option>
        <b-form-select-option value="calendar"> &#xf073; calendar</b-form-select-option>
        <b-form-select-option value="camera-retro"> &#xf083; camera-retro</b-form-select-option>
        <b-form-select-option value="car"> &#xf1b9; car</b-form-select-option>
        <b-form-select-option value="certificate"> &#xf0a3; certificate</b-form-select-option>
        <b-form-select-option value="chain"> &#xf0c1; chain</b-form-select-option>
        <b-form-select-option value="chain-broken"> &#xf127; chain-broken</b-form-select-option>
        <b-form-select-option value="check"> &#xf00c; check</b-form-select-option>
        <b-form-select-option value="child"> &#xf1ae; child</b-form-select-option>
        <b-form-select-option value="cog"> &#xf013; cog</b-form-select-option>
        <b-form-select-option value="cogs"> &#xf085; cogs</b-form-select-option>
        <b-form-select-option value="ship"> &#xf21a; ship</b-form-select-option>
    </b-form-select>
</template>

很奇怪.. 想法?

编辑 1:我注意到它始终显示相同的图标。此外,bookmark 图标在选项列表中为轮廓,但在选中时为实心...

【问题讨论】:

    标签: vue.js bootstrap-vue


    【解决方案1】:

    进一步搜索帮助我偶然发现了@Behrang Saeedzadeh 的这个答案 https://stackoverflow.com/a/22598619/5449796

    我正在使用:

        <b-form-select v-model="row.item.icon" class="fa">
            <b-form-select-option value="anchor"> &#xf13d; anchor</b-form-select-option>
    

    我应该使用:

        <b-form-select v-model="row.item.icon" class="fa">
            <b-form-select-option class="fa" value="anchor"> &#xf13d; anchor</b-form-select-option>
    

    至于列表中显示的一些图标,我不知道为什么会这样。

    虽然图标在被选中时显示是有道理的,因为class="fa" 在父级上。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2021-06-30
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2022-07-11
      • 2021-02-01
      • 2018-05-22
      • 2018-08-22
      相关资源
      最近更新 更多