CODEWITHSUNDEEP
htmlcssimageresponsive-design
ducin
ducin

Reputation: 26477

responsive images resizing based on css classes

I want to resize images basing on media queries. If this was just an image, I would attach a CSS class to the image and override it for different screen resolutions.

The thing is that the images are, actually, fontawesome icons. This is an example: http://fortawesome.github.io/Font-Awesome/examples/

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

fa-lg, fa-2x, fa-3x, etc. are CSS classes that apply different sizes. What is the best approach to do responsive approach here - change icon sizes depending on screen size? I don't want to modify the 3rd party lib (font awesome) itself. It seems like changing screen resolution should replace one class with another...

Upvotes: 0

Views: 501

Answers (2)

mg33dev
mg33dev

Reputation: 158

fa-lg is just the same icon as fa-5x, just resized. So with your media queries just resize the icon to whichever size you prefer using ordinary font-size: method.

I normally use before: with font FontAwesome using their unicode as seen here; http://fortawesome.github.io/Font-Awesome/icon/camera-retro/ unicode: f083

.aside .cat_title:before {
    content: "\f083";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    font-size: 32px;
    padding-right: 3px;
    color: #FC0;
}

@media only screen
    and (max-width : 320px) {
    .aside .cat_title:before {
        content: "\f083";
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        text-decoration: inherit;
        font-size: 10px;
        padding-right: 3px;
        color: #FC0;
    }

  }

then again for each media query etc.

Upvotes: 1

ducin
ducin

Reputation: 26477

Basing on @Anima-t3d's suggestion, I've made up a javascript/media-query solution that perfectly suits my needs:

var mql = window.matchMedia("(min-width: 600px)");
mql.addListener(handleResolutionChange);
handleResolutionChange(mql);

function handleResolutionChange(mql) {
  if (mql.matches) {
    $('.fa').removeClass('fa-2x');
  } else {
    $('.fa').addClass('fa-2x');
  }
}

There is a listener that watches screen resolution and either adds or removes CSS classes that are built into fontawesome. Read more at: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Testing_media_queries

Upvotes: 0

Related Questions