Link the Font Awesome CSS stylesheet to your webpage.Either use CDN or download the library files on your system. Here is an example of icon fonts using Font Awesome Library – We can use CSS style rules to easily change and modify color, size/resolution, apply box-shadow, apply CSS animations and transitions. On the other hand, icon fonts are in essence simple text. If you needed to change the color or resolution of an icon, that would mean needing an entirely new image altogether. Even though image sprites was a vast improvement, it still had tons of shortcoming. ![]() Unlike images and sprites, icon fonts are able to scale up perfectly to any resolution without any degradation or loss of visual quality. The next stage of evolution in web icons came in 2012 in form of icon fonts. A useful free tool to generate image sprites that you can use is Toptal Sprite Generator. Altering the value of background position to -85px 0, we can display the second icon from the image sprite. Note that img_trans.gif is a just small transparent image being used because “src” attribute cannot be left empty.īy setting background position to 0, 0 and the width, height of the container set at 75px each, we are able to display the first character icon. Using CSS, we can play with background position property to display only the icons we want hiding the rest from view. Instead of using 24 separate images, we use this single sprite image to reduce number of server requests and bandwidth. Here we have a image sprite – “last-guardian-sprites_0.png” containing a number of character icons. Moreover, a lot of accessibility issues are also solved as background images are invisible to text browsers and screen readers unlike images which are regarded as content. This resulted in the conservation of bandwidth and increased website load speed. Sprites proved to be revolutionary for web fonts by solving the malice of generating multiple HTTP server requests triggered by individual images. By adjusting the CSS background property, only the required icon is displayed. Image sprite arranges all icons in a single GIF or PNG file and is loaded as a CSS background image. An image sprite is merely a collection of separate individual images put together to form a single image. Rise Of Image SpritesĮarly 2000s started a new trend of image sprites. Although use of images for icons is still quite common, it represents a terrible practice which must be avoided at all costs. Also, if an image icon has a hover effect, then a new image for its hover state needs to be loaded separately using Javascript/jQuery. Lastly, since images are not scalable, each image icon needed to have multiple resolution formats for different screen sizes. ![]() Another major drawback was that if a webpage was using multiple images for icons, each of them would trigger a new HTTP request which seriously downgraded performance. Image formats like PNG and JPEG suffer from the dramatic loss in rendered quality when up or down scaled. ![]() The biggest drawback of using images to display web icons is the lack of scalability. You can choose icon fonts or SVG but you should make sure that your designs are responsive so if you are looking for a free next-gen browser to build, test & debug mobile websites you can try LT Browser a dev-friendly browser in which you can see the mobile view of your website on Android and iOS resolutions & check its responsiveness.īut this technique was troubled with a plethora of shortcomings. In this article, we will explore in brief the history of web icons, pros, and cons of font icons vs SVG icons. SVG icons system ensures better performance, higher accessibility standards, high rendering quality, unmatched flexibility, and extensive customization. However, in recent times there has been a general consensus and momentum towards SVG icons format. Proponents of both icon formats argue the merits of one over another. This is a debate that shows no signs of abating is splitting the dev community into two. But now developers have 2 choices at their disposal – Icon Fonts vs SVG Icons(Scalable Vector Graphics). However, using images for icons delivers scathingly poor performance in terms of render quality and resolution. Traditionally, developers had to rely on just images formats to quench their needs. Consequently, every developer has to face this conundrum – Which icon set should they use? From navigation menus to social media icons, symbols and indicators, icons feature heavily on almost every single website and app on the internet and its popularity showing no signs of waning anytime soon. In the world of modern web, icons have become an indelible and integral part of UI design.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |