These days, an easy-to-use website is absolutely necessary and the web designers here at Blueshoon know this all too well. The main purpose of a website is to convey information and the easier you make this for your user, the happier they will be. I like to compare bad web design to a Michael Bay movie; Yes it may be flashy and have lots of effects, but where’s the substance? A great way to convey information without being wordy is by using icons which is why this week, Fontastic.me is the Wednesday Website We Love.
Fontastic.me is a free service that offers over 9,000 icons that you can use for your website. One problem designers run into when using icons is having to change the style properties and when you have numerous icons on your site, this can be a tedious task. First you have to open each icon in your design program (ex. Photoshop or Illustrator), adjust the style, save them, and upload them via FTP. The great thing out Fontastic.me is that it streamlines this process for you by allowing you to make all your adjustments within your CSS.
First, you select which icons you want. If you have custom-made icons, you can upload them. Next, each icon is assigned a letter so they can be easily defined in your CSS. Finally, you can publish your icons straight to your website using the code they generate for you or you can download them manually. From there, you can edit your icons by creating CSS rules for each icon within your CSS. You can edit your icon’s size, color, visual effect, animation, and other properties right from your CSS without having to go through the long process of editing offline and uploading.
Step 1: Select the icons you want.
Step 2: Customize the icon’s name and/or character.
Step 3: Publish your icons straight to your website or download them manually.
Fontastic.me’s icons are all SVG format (Scalable Vector Graphic). If you’re familiar with vectors, you know how awesome they are because now matter how large you size them, they don’t lose their quality. This is great for creating crisp, professional looking graphics that also looks great on retina displays.
Speaking of good web design, Fontastic.me uses a clean, simple design that uses lots of icons (go figure) to convey their message. In essence, they’re trying to make a point on how well icons can communicate information without saying too much. They’re also universal and can typically be understood no matter what language you speak. They’re also great for mobile use and applications. So if you’re a web designer, you can’t ignore the value of icons and Fontastic.me makes using them even easier!