I upgraded my website from FontAwesome v4.7 to v5.0. Everything works fine except one thing - I cannot use FontAwesome icons in buttons (value) anymore. I used this trick:
<input title="Log in via Facebook account" type="button" onclick="URL';" class="button_facebook fa-input" value=" Facebook" />
and in CSS I sued this:
.fa-input {
font-family: FontAwesome, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
original source: https://stackoverflow.com/a/11703274/7736126
However, now with FontAwesome v5 it is not working anymore, is there any solution or workaround? Thank you very much!
UPDATED Answer:
After seeing this phenomenon occur elsewhere, I dug in a little deeper and discovered that you can still use a unicode entity (like ) in the value of an <input> element. However, you must then also set at least one CSS property that forces the browser to redraw the control with the custom font defined in CSS rather than the browser's default. This feels like a hack, but it's attested here as well, for example.
So, assuming you already have the font-family set up correctly on that <input>, the last tweak might be simply to set something like background-color (to a non-default value), or border: 1px solid.
Here's a CodePen that demonstrates this with FA5 Webfonts with CSS.
Font Awesome 5 also has an SVG with JavaScript method, but I don't think there's any way to get this feature to work with SVG/JS, so if you want to use unicode entities in <input> values with FA5, stick to Webfonts with CSS.
ORIGINAL Answer:
Could you do something similar to the accepted answer in the other question you linked? Like this:
<button type="submit" class="btn btn-success">
<i class="fab fa-facebook fa-lg"></i> Facebook
</button>
Here's a working example on codepen that uses Webfonts with CSS.
And here's a working example with the same markup that uses SVG with JS.
(NOTE: this only demonstrates adding the icon to the button in FA5. You'd have to also wire up the button to do whatever action you want it to do when clicked.)