codepen: https://codepen.io/yingjiehu/pen/ppxRRM
Upon narrowing the viewport, the “Random” button splits into two lines, one for the text “Random”, the other for fontawesome 5 icon.
I tried several methods for fontawesome 4 found online. But they do not work for fontawesome 5.
Could anyone help?
Thank you.
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 (display: inline-block).
Another thing that’s perhaps worth noting is that you could wrap the two buttons, or even the search icon, inside an inline-block-ed <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).