CODEWITHSUNDEEP
javascriptfont-awesome
John Paul
John Paul

Reputation: 97

Inserting font awesome icon using JavaScript

I am working on a WordPress site using a jobs application plugin. I want to add a font awesome icon to a button using javascript. The hml code I can see for the button is.

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

which I think I need to make the following for the icon to show.

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

the JavaScript I have added to achieve this is,

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

When I console.log(d1); I can see that I have got the code I want. But the icon does not show. If I use 'afterend' then I do see the icon, but outside the button.

I seem so close, but so far away.

Any advice?

Upvotes: 2

Views: 6010

Answers (2)

Roko C. Buljan
Roko C. Buljan

Reputation: 205979

As I said in comments:

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

Therefore, use a BUTTON element

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

Using an icon inside the Value of an INPUT

JavaScript solution

If you really cannot change the markup from <input> to <button> element, than you could define the font-family with the desired fallbacks right in CSS, and concatenate the current INPUT value to the unicode representation of the Font Awesome icon el.value += " \uf054":

Example using both Google fonts and 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!">

If you use some Google font, or you want to inherit the font, no worries, pick one:

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;

you get the idea.

HTML solution

If you don't want to use JavaScript than you could use the unicode representation right inside the value attribute: &#xf054;

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

Upvotes: 1

connexo
connexo

Reputation: 56720

Font awesome icons rely on creating their icons on a pseudo element ::before, which creates the icon via that pseudo element's content property.

input tags cannot have content, thus using font awesome icons on them cannot work.

Instead of

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

which, btw, is invalid HTML since input cannot have a closing tag </input> for the same reason ::before doesn't work on it, use

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

Since you need the icon at the right side of the button, you can do that either by adding an element at the end that carries the CSS classes 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>

or by adding this simple 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>

Which method you use is up to you, I personally prefer to solve layout-related problems with CSS rather than applying otherwise unnecessary additional markup.

Upvotes: 0

Related Questions