使用 JavaScript 插入字體真棒圖標

Question

我正在使用工作應用程序插件在 WordPress 網站上工作。 我想使用javascript向按鈕添加一個字體真棒圖標。 我可以看到按鈕的 hml 代碼是。

<input type = "button" class="application_button button" value="apply for job"></input>

我認為我需要為圖標顯示以下內容。

<input type = "button" class="application_button button" value="apply for job"> <i class = "fas fa-chevron-right"></i></input>

我為實現這一目標而添加的 JavaScript 是，

 var d1 = document.querySelector('.application_button');
d1.insertAdjacentHTML('beforeend', '<i class="fas fa-chevron-right"></i>');

當我 console.log(d1); 我可以看到我得到了我想要的代碼。 但是圖標不顯示。 如果我使用“afterend”，那么我會看到圖標，但在按鈕之外。

我看起來很近，但又很遠。

有什么建議嗎？

Answer 1

字體真棒圖標依賴於在偽元素::before上創建它們的圖標，它通過該偽元素的content屬性創建圖標。

input標簽不能有content ，因此在它們上使用字體真棒圖標無法工作。

代替

<input type="button" class="application_button button" value="apply for job"></input>

順便說一句，這是無效的 HTML，因為input不能有結束標記</input>出於同樣的原因::before對它不起作用，請使用

<button type="button" class="application_button button">apply for job</button>

由於您需要按鈕右側的圖標，您可以通過在末尾添加一個帶有 CSS 類fas fa-chevron-right的元素來實現：

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet"/> <button type="button" class="application_button button">apply for job <i class="fas fa-chevron-right"></i></button>

或者通過添加這個簡單的 CSS：

 .application_button.button.fas.fa-chevron-right::before { float: right; margin-left: 5px; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet"/> <button type="button" class="application_button button fas fa-chevron-right"> apply for job</button>

您使用哪種方法取決於您，我個人更喜歡使用 CSS 解決與布局相關的問題，而不是應用其他不必要的附加標記。

Answer 2

正如我在評論中所說：

INPUT 是一個空元素（如<br>等...）。 用</input>關閉它是無效標記。

因此，使用 BUTTON 元素

 <button type="button">Apply for job <i class="fas fa-chevron-right"></i></button>

 <button type="button"><i class="fas fa-chevron-left"></i> Go back</button>

---

在 INPUT 的值中使用圖標

JavaScript 解決方案

如果您確實無法將標記從<input>更改為<button>元素，那么您可以在 CSS 中定義具有所需回退的font-family ，並將當前 INPUT 值連接到 Font Awesome 圖標el.value += " \"的unicode 表示el.value += " \" ：

_{使用Google 字體和 Font Awesome 的示例：}

 const addChevron = el => el.value += " \"; document.querySelectorAll('input.button').forEach(addChevron);

 .button { font-family: 'Montserrat', 'Font Awesome 5 Free', sans-serif; font-weight: 900; /* Needed for font awesome to work... */ }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet"/> <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"> <input class="button" type="button" value="Submit to win!">

如果你使用一些谷歌字體，或者你想繼承字體，不用擔心，選擇一個：

font-family: 'Some Google Font', 'Font Awesome 5 Free', sans-serif;
font-family: inherit, 'Font Awesome 5 Free', sans-serif;
font-family: 'Font Awesome 5 Free', sans-serif;

你明白了。

---

HTML 解決方案

如果您不想使用 JavaScript，則可以在value屬性中使用 unicode 表示： 

 .button { font-family: 'Font Awesome 5 Free', sans-serif; font-weight: 900; /* Needed for font awesome to work... */ }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet"/> <input class="button" type="button" value="Submit to win! &#xf054;">