I did some research on how to do it and the best I could come up with so far is what you see below
For starters, you did the opposite of what we recommended on the other thread. You are using a media query to decide the settings for the icons on mobile. You should not have any media queries controlling the behavior on mobile. You should use the media query to control the behavior on large displays using a min-width rather than a max-width media query. In that media query you would hide the icons and unhide the text. At least that would be the way to do it using a “mobile first” approach.
Note: It may also be time to add some ids to the HTML attributes so you can target individual elements. Otherwise if you have any FontAwesome icons elsewhere in the page they will also be affected.