menu
Ad goes here

Wednesday, 29 July 2015

How to use computers or devices icons in your web application?

A small icon says enough about the content which makes reading additional text unnecessary.

Websites or Mobile Applications can be quite boring without using icons and we can see most of the websites using them today to get better understanding about content or navigation.

When you use icons for your applications, keep the proximity principle in mind and group them with content they related to and of course about the icon sizes.

Previously, we directly used images for icons and later started to use sprite images through CSS and these days most of the site used icon fonts where have to used Vector Graphics images and need help from other sites, but do you know you can use icons from the used computers/ devices by using a small CSS and its really very light weighted.



Let's start discussing that how you can use icons for web application from used computers or devices.

As I mentioned that we have to use icons from own PC or devices so first we have to access the character map. So please click on start and type ‘charmap’ inside the run field or you can also manually access the character map as per used devices.



Let's create stylesheet which will be saved using UTF-8 to get the icon in proper view to support all special character. Find suitable icon from open character map window and select it to copy from the 'character to copy field' and paste it with a class name inside the stylesheet.



You almost done and now the time to check it in the browser so create a HTML page and use defined icon class name. Hope you can understand the entire thing is ready and you can check now by browsing the created page.



Hope you can understand that how we can create it easily without using any images or resources from online, it will work from your local devices which make your application faster.



If you need any help to create icons using instructions above, please use comment box below to get quick reply.


No comments:

Post a Comment

Books for you (Crafted with )