如何用基於字體的圖標（Font Awesome / Ion）替換SVG圖標？

Question

我有一個顯示SVG圖標的下拉列表，而其他所有列表則顯示帶有基於字體的圖標的按鈕（在本例中為ion-icon）。 當然，我希望所有下拉列表看起來都一樣。

我嘗試修改CSS代碼並瀏覽了一些.js和.php文件，但沒有成功。

SVG圖標的代碼

<svg class="dd__expandIcon" viewBox="0 0 9 15" width="9px" height="15px">
    <path d="M315,1318.04l-4.5,4.96-4.5-4.96,0.944-1.04,3.557,3.92,3.553-3.92,0.944,1.04m-9-5.08,4.5-4.96,4.5,4.96-0.944,1.04-3.557-3.92-3.553,3.92L306,1312.96" transform="translate(-306 -1308)"></path>
</svg>

.dd__expandIcon {
    width: 9px;
    height: 15px;
    flex-shrink: 0;
    fill: #bdbdbd;
    margin-left: 10px
}

離子圖標代碼

<button type="button" class="reactiveToggleBtn___cQAWH">
    <i class="ion-chevron-down"></i>
</button>

.reactiveToggleBtn___cQAWH i {
    font-size: 13px;
    color: #484848;
}

您可以在此處直接查看實際結果（“Thèmede laséance”下拉列表）與預期結果（所有其他下拉列表）的對比：site

謝謝你的幫助！

Answer 1

我終於找到了解決問題的辦法。

隱藏svg：

svg.dd__expandIcon {visibility:hidden;}

將背景圖像添加到選擇框

.dd__selectControl {background: #f1f1f1 url('/wp-content/uploads/dropdown2.png') right no-repeat!important;}

也許不是執行此操作的正確方法，但如上所述，它可以解決問題。

Answer 2

您可以使用以下方式將SVG圖標文件轉換為Font base圖標

https://icomoon.io/app

1. 導入圖標
2. 選擇要轉換的圖標
3. 點擊生成字體

有關更多信息，請參見下面的鏈接： 如何將.svg文件轉換為字體？