What is Icon Font? Teaching how to use it and cool technique
Nov 30, 2023 0:03:32 GMT -5
Post by account_disabled on Nov 30, 2023 0:03:32 GMT -5
Before putting icons on websites The only way is to download a PNG-style icon, which has the problem that the size of the icon cannot be changed. Changed the image to be broken into a Pixel. Today I will introduce the use of Icon Font, a new type of icon that can be zoomed in and the image will never be broken. Plus it's easier to use than PNG images and of course it 's free to download !! What does this article have? Show Problems with using Icon PNG There's nothing wrong with using PNG icons on your website. I used to use it often in the past, or now I use it occasionally. However, PNG icons are image files, which are made from colored dots arranged 1 pixel at a time when we zoom in or out.
These colored spots will be squeezed or enlarged, causing the picture to be too small to be able Phone Number List to see what's going on. Or the picture is too big and it will look broken. Problem with broken images in Icon Template PNG Problem with broken images in Icon Template PNG Another problem is that if we use 1 icon image per file, there will be a problem that if we have 100 icons , we must use 100 files. Calling each file one by one will slow down the website. If anyone has read about Performance in loading websites. You'll always find people talking about how calling multiple files (or HTTP Requests) will make the website load more slowly. However, this problem can be solved by using something called CSS Sprite , which is taking all used images and arranging them in one image.
Then choose to display by adding an image as the background, then set width, height, background-position in CSS. This method reduces the number of times the image is loaded to just 1 time and also reduces the overall image size (usually 10 images). Separate 1 image per 1 file, total size 20kb. If using CSS Sprite, only one image remains, size only 13kb - refer to CSS-Trick ) Example CSS Sprite from Servergrove Example CSS Sprite from Servergrove Now let's get to know Icon Font and how it works. And what are the advantages? What is Icon Font and how is it useful? If anyone has read the article Techniques for making a website that supports it Retina-Display You've probably heard of Icon Font before. The fonts that we commonly use, you will notice that when they are scaled and enlarged they do not break.
These colored spots will be squeezed or enlarged, causing the picture to be too small to be able Phone Number List to see what's going on. Or the picture is too big and it will look broken. Problem with broken images in Icon Template PNG Problem with broken images in Icon Template PNG Another problem is that if we use 1 icon image per file, there will be a problem that if we have 100 icons , we must use 100 files. Calling each file one by one will slow down the website. If anyone has read about Performance in loading websites. You'll always find people talking about how calling multiple files (or HTTP Requests) will make the website load more slowly. However, this problem can be solved by using something called CSS Sprite , which is taking all used images and arranging them in one image.
Then choose to display by adding an image as the background, then set width, height, background-position in CSS. This method reduces the number of times the image is loaded to just 1 time and also reduces the overall image size (usually 10 images). Separate 1 image per 1 file, total size 20kb. If using CSS Sprite, only one image remains, size only 13kb - refer to CSS-Trick ) Example CSS Sprite from Servergrove Example CSS Sprite from Servergrove Now let's get to know Icon Font and how it works. And what are the advantages? What is Icon Font and how is it useful? If anyone has read the article Techniques for making a website that supports it Retina-Display You've probably heard of Icon Font before. The fonts that we commonly use, you will notice that when they are scaled and enlarged they do not break.