我如何使選擇插入符號成為一個(gè)很棒的字體圖標(biāo)？這個(gè)例子中的解決方案似乎對我不起作用。

這是我的HTML:

<div class="form-group">
     <label class="control-label" for="input_name">Input</label>
     <input type="text" autocomplete="off" class="form-control js-server-side-selectize" name="input_name" placeholder="None Selected" data-load="/backend/endpoint" value="" />
</div>

這是我的CSS:

.selectize-control.js-server-side-selectize:not(.loading) .selectize-input::after,
.selectize-control.single.js-server-side-selectize:not(.loading) .selectize-input::after,
.selectize-control.single.js-server-side-selectize:not(.loading) .selectize-input.dropdown-active::after {
  content: "\F002";
  font-family: "Font Awesome 5 Pro";
}

這是我的JS:

$('[name="input_name"]').selectize({
                valueField: "id",
                labelField: "name",
                searchField: "name",
                selectOnTab: true,
                loadThrottle: 450,
                maxItems: 1,
                load: function (search, cb) {
                    var selectize = $(this)[0];
                    var url = this.$input.data('load');

                    if (search.length >= 1) {
                        $.ajax({
                            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                            url: url,
                            data: { search: search },
                            type: 'POST',
                            success: function (res) {
                                cb(res.data);
                            },
                            error: function () {
                                cb();
                            }
                        });
                    }
                    else {
                        selectize.close();
                        cb();
                    }
                }
            });

使用我的瀏覽器的檢查器，我可以看到這段代碼比selectize.css更具體，但仍然會(huì)導(dǎo)致這種情況。

顯然，這不是我想要的。理想情況下，三角插入符號將被放大鏡圖標(biāo)完全取代。

# # #我也有同樣的問題，就是默認(rèn)的脫字符號圖標(biāo)和放大鏡圖標(biāo)出現(xiàn)了，跟你圖片里的https://i.stack.imgur.com/aJO21.png.一模一樣

我通過添加透明邊框解決了這個(gè)問題，就像這樣:

&:after {
             border-color: transparent !important;
             
             // then add the icon you want, in my case:
             font-family: standard_icon;
             content: "\e00a";
             font-size: 12px;
           }