How to create efficient icon in Web Development

Icons are greatly used in Websites. It is easy to use multiple images to create icon, but how to create efficient icons is another interesting topic. Here we list three ways.

1. css sprite

First you need to have a png to include all the icons which you want to use.

Here is a tool to help you merge all icons images to one png. http://spritegen.website-performance.org/

Second you can define a class named sprite, here is its style:

.sprite li s{
  height: 40px;
  width: 24px;
  display: block;
  margin-left: 10px;
  margin-right: 8px; 
  float: left;
  background-image: url("/your/final/sprite/png/path");
}

Third to use “background-position” to locate each icon in png. Here is an example.

<ul class="sprite">
  <li>
    <s style="background-position: 0 0;"></s>
  </li>
  <li>
    <s style="background-position: 0 -40px;"></s>
  </li>
</ul>

Please note here is negative index.

 

2. font+HTML

Icon fonts has multiple advantages: flexible(you can change its color), scalable(You can modify it size) and quality(when you rescale page, its pixel quality wouldn’t be changed)

Here we also introduce an online tool:https://icomoon.io/ You can easily use it to get font icons.

After you get your icon fonts, then we talk about how to use it.

First you need to create new font by “font-face”.

@font-face {
  font-family: 'MyWebFont'; 
  src: url('webfont.eot'); /* IE9 Compat Modes */ 
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff2') format('woff2'), /* Super Modern Browsers */ url('webfont.woff') format('woff'), /* Pretty Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ 
  font-weight: normal;
  font-style: normal;
}

When you use it, just create a class and use it.

.icon-web {
  font-family: "MyWebFont";
  font-size: 20px;
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Finally, just use it.

<i class="icon-web"></i>

&#xf048 is number of corresponding icon. You can get it from that tool. You also can change its color by “color: #efe0ce;” and change its size by “font-size: 40px”;

3. font+CSS

Here this third method is similar to second one. But more css usage.

For example, we can use “before” and “after” to do more interesting effect.

Here is an example.

.icon-web:before {
  content: "\e600";
}

Summary

It is hard to say which method is the best. For me, if it is not too special icons, I prefer to the second method and third one. If there are many creative icons, I prefer to use the first solution.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s