I'm having an issue making font-awsome icons responsive. Here is a codepen (i.e: http://codepen.io/baytes/pen/yOzEgv ) showing the rest of the elements on the page resizing, however the font awesome icons are not resizing. Any help is greatly appreciated.
Unable to replicate
In Firefox, the fa icons resize. Is there a particular situation that has issues? Can you provide more specific info and a link to the actual page?
Gary, Thank you for your
Thank you for your prompt response. Here is the link to the live site (http://www.lextopdollar.com/). I'm using firefox as my "main" development browser and chrome as a secondary. The issue arises when the page is viewed on a mobile device &/or when firefox/chrome is put into "responsive" mode (with any resolution). The image that the icons "sit on top of" auto resizes based on screen size/resolution however the fa-icons still stay the same size (an end up larger when in "responsive mode") Any help would be greatly appreciated. I'm starting to pull my hair out, lol. Thanks in advance.
There is a relative new
There is a relative new command in css which seems to be working in your case.
Add the following code to components.css on line 66:
font-size: 2.2vw; Add this to i, .icon