3 replies [Last post]
baytes
baytes's picture
Offline
newbie
TN
Last seen: 3 years 26 weeks ago
TN
Timezone: GMT-5
Joined: 2016-01-30
Posts: 4
Points: 7

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 23 hours 48 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

baytes
baytes's picture
Offline
newbie
TN
Last seen: 3 years 26 weeks ago
TN
Timezone: GMT-5
Joined: 2016-01-30
Posts: 4
Points: 7

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

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 3 years 10 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

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.

Check Maximum Webdesign for your online solutions