I don’t think it’s really a Font Awesome problem in this case. If I’m not mistaken the wrapping that you are seeing is perfectly normal because the text inside your
.formbutton class is treated with wrapping rules just as they would in a paragraph of text (inline element).
One way to get around it without changing much of your code is to make the anchor that has the
.formbutton class an
inline-block element (
Another thing that’s perhaps worth noting is that you could wrap the two buttons, or even the search icon, inside an
<div>—that way you won’t get them pushed down one by one (for exactly the same reason as the problem that you are having).