javascript - 使用 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

正如我在评论中所说:

INPUT is a void element (like <br> etc...). Closing it with </input> is invalid markup.

因此，使用 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>

<小时/>

在输入值内使用图标

JavaScript 解决方案

如果您确实无法更改 <input> 的标记至<button>元素，而不是您可以定义 font-family在 CSS 中使用所需的后备，并将当前 INPUT 值连接到 Font Awesome 图标 el.value += " \uf054" 的 unicode 表示 :

_{同时使用 Google 字体和 Font Awesome 的示例:}

const addChevron = el => el.value += " \uf054";
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!">

如果您使用某种 Google 字体，或者您想继承该字体，不用担心，请选择一种:

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;">