I find that the code you provide is quite similar to what I have tried.
The search icon displayed is still not the same as the one originally in the GeneratePress search bar.
So what I did is (flip horizontally),
<i class=”fa fa-search fa-flip-horizontal”><!– icon –></i>
The search icon (magnifying glass) is now with the correct orientation.
The font color is suppose to be light green with dark green for the font’s background as in the GeneratePress search bar.
So I add in “fa-inverse”.
<i class=”fa fa-search fa-flip-horizontal fa-inverse”><!– icon –></i>
This time round the icon disappear.
I am thinking if it is possible to get the exact same icon same inverse color that is default for the generatepress search bar?