4
\$\begingroup\$

I would like your opinion on the following subject. I have to provide icons in different sizes and states. The sizes will be 16*16, 24*24 and 32*32.

The states bright, dark, disabled and link.

Because of browser support we decided for .png instead of .svg. Do you feel this is the best CSS approach for this case?

Would you make some changes to improve this styles?

<i class="fx-icon fx-icon-home">

.fx-icon { /*standard icon size*/
    border: none;
    display: inline-block;
    height: 16px;
    line-height: 16px;
    margin-right: 3px;
    vertical-align: top;
    width: 16px;
}

.fx-icon.fx-icon-medium {
    height: 24px;
    line-height: 24px;
    width: 24px;
}

.fx-icon.fx-icon-large {
    height: 32px;
    line-height: 32px;
    width: 32px;
}

.fx-icon.fx-icon-larger {
    height: 48px;
    line-height: 48px;
    width: 48px;
}

/*Icon Home*/
.fx-icon-home-bright,
.fx-icon-home-dark,
.fx-icon-home-disabled,
.fx-icon-home-link {
    background: url(images/icon-home.png) no-repeat;
}

.fx-icon-home-dark {
    background-position: -16px 0;
}

.fx-icon-home-disabled {
    background-position: -32px 0;
}

.fx-icon-home-link {
    background-position: -48px 0;
}
\$\endgroup\$
2
  • \$\begingroup\$ Is the class .fx-icon.fx-icon-larger part of the spec or was it just left out in your introduction? \$\endgroup\$ Dec 2 '13 at 14:08
  • \$\begingroup\$ Yes, we also introduced the size 48*48 :) \$\endgroup\$
    – Paulo
    Dec 2 '13 at 14:24
4
\$\begingroup\$

My recommendation would be to use a tool to generate a sprite sheet + CSS, rather than writing it out manually yourself. I've not used it myself, but the sprite helpers found in Compass (see: http://compass-style.org/reference/compass/helpers/sprites/, but it only works with PNGs) are very popular. If your set of icons expands in the future, you'll be thankful that you don't have to go back and fix everything manually: just run your tool again with the new images and you're good to go.


Just because browser support isn't perfect, that doesn't mean you can't have both PNG and SVG. The only browsers that are widely used that do not support SVGs as a background image are IE8 and Android 2.3x.

By taking advantage of the fact that the browsers that do not support SVGs as a background image either do not support the background-size property (IE8) or require a prefix for it (Android 2.3x), you can serve the correct file to the correct browser:

.foo {
    background: url(foo.png) no-repeat; /* IE8 and Android 2.3x */
    background: url(foo.svg) 0 0 / auto auto no-repeat; /* everyone else */
}

In addition to being able to resize gracefully, SVGs have one other little-known advantage: you can use media queries inside them. This is an excellent way of reducing details as the SVG gets smaller or adding details as the SVG gets bigger. When used as a background image, support for media queries inside the SVG is somewhat limited (the demo below appears to only work as expected in IE9+ and Chrome)

http://codepen.io/cimmanon/pen/HldKw

<p class="one">Foo</p>

<p class="two">Foo</p>

<p class="three">Foo</p>

p {
  display: inline-block;
}

p:before {
  background: url(http://people.opera.com/andreasb/demos/demos_svgopen2009/update/circle.svg) 0 0 / cover no-repeat;
  height: 200px;
  width: 200px;
  display: block;
  content: ' ';
}

.two:before {
  height: 100px;
  width: 100px;
}

.three:before {
  height: 50px;
  width: 50px;
}

The SVG:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
 <g>
  <title>Simple SVG + mediaqueries</title>
  <defs>
  <style type="text/css">
    #circle {
        fill: #fce57e;
        stroke: #fff;
        stroke-width: 100px;
        stroke-opacity: 0.5;
        fill-opacity: 1;
    }
    @media screen and (max-width: 350px) {
    #circle {
        fill:  #879758;
    }
    }
    @media screen and (max-width: 200px) {
    #circle {
        fill: #3b9557;
    }
    }
    @media screen and (max-width: 100px) {
    #circle {
        fill: #d8f935;
    }
    }
    @media screen and (max-width: 50px) {
    #circle {
        fill: #a8c45f;
    }
    }
    @media screen and (max-width: 25px) {
    #circle {
        fill: #2c3c0c;
    }
    }
  </style>
  </defs>
  <circle cx="200" cy="200" r="150" id="circle" />
 </g>
</svg>

Learn more: http://blog.cloudfour.com/media-queries-in-svg-images/

\$\endgroup\$
3
\$\begingroup\$

Yes, it's the right approach. You could use a CSS preprocessor to avoid mistakes due to repeating yourselves. Using PNG icons is a good idea because smaller icons should be less detailed.

iCal icons

\$\endgroup\$
2
  • \$\begingroup\$ What's so special about PNGs that make them better suited than any other image format? \$\endgroup\$
    – cimmanon
    Dec 3 '13 at 16:02
  • \$\begingroup\$ @cimmanon It's more about vector graphics vs. raster graphics. PNG is simply a nice lossless format. \$\endgroup\$ Dec 3 '13 at 16:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.