2

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?

Improve this question
1
  • Input is a void tag (like <br> etc...). Closing it with </input> is invalid markup. Commented Mar 2, 2020 at 17:46

2 Answers 2

Reset to default
1

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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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.

Improve this answer

8 Comments

Don't add the fas classes to the button. The arrow should be on the right. Therefore use another element inside the button - after the text: apply for job <i class="fas fa-chevron-right"></i> - Also this will help not to mess with font-family fallbacks since the text is inside the fas... (like in your case)
No, there's no if.
@RokoC.Buljan I've accounted for that by adding additional solutions. Please reconsider your downvote as my answer has all the correct information to solve the given problem, as well as an explanation of what is going wrong in OP's attempt.
Most people coming to your answer will copy-paste your first example which is not the way to do it. And also, don't mess with unnecessary floats.
I don't agree with your don't mess with floats statement; otherwise I have removed the first suggestion.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.