Icons, Use an Image or Font?

Nowadays, icon already become a needs for all website, doesn’t matter if the site was for commercial use, portfolio, etc. Icon can be used to tell someone a message and also to make them easier to know what is the meaning of the icons.

For example, if you found this number at some website, 6998874125. That number will not be anything, and maybe people who visit your site didn’t know what is that number used for, or what does that number means. But, if you add some telephone icon beside that number, for sure people know if that number was a phone number.

But, the problem now is: Which one is better for icons? Image or font.

Capture

Here are some comparison about those two, font and image:

Image

pros

  • If you use an image, you could give all your creativity to make the icon. Maybe you could make a new icon that never be used by others
  • The quality of the image can be set as high as you want
  • You may give several colors inside the icon to make it more attractive

cons

  • If the image you made for icon have a big file size, it may make your site load very slow
  • Sometimes, your icons may made people confuse about what does it means
  • It take too much time in order to create a good icons
  • If you are an amateur/just started to create an icon, then you may need a big resource such as to buy a new image editing software

Font

pros

  • Since CSS3 can be used, you could easily displaying the font using :before or :after
  • A thousand icons that available inside a single font file will not bigger than 2MB
  • It doesn’t matter how big or small is your screen, your icon will not be stretched
  • The size of the icon is flexible since you could set the size using CSS (font-size)
  • It look more professional

cons

  • Some good icons have a license on it or even paid/premium
  • The color of the icon is static, which means that you can only have a single color inside the icon

Maybe that’s it the comparison between font and image, at the end the choice is yours.

If you prefer to choose a font to displaying your icon, you may use this site for your reference. Also i have some example about how to use a font as an icon:

.sample:before {
    content: "\f10d";
    font-family: 'icomoon';
}
Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

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