Fri, 2016-04-08 00:57
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.
Thanks,
Brad
Fri, 2016-04-08 04:13
#1
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?
cheers,
gary
Fri, 2016-04-08 16:28
#2
Gary, Thank you for your
Gary,
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.
Thanks,
Brad
Wed, 2016-05-04 05:22
#3
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
Cheers,
Henk.