![]() ![]() After checking that, I started testing the usage of SVG icons in a project that I worked on in the past using icon fonts, the result was awesome and since then I started using SVG for the icongraphy. Wow! □ look at that green! It’s well supported and we still are afraid of using it.Īs you see in the figure, SVG is well supported starting IE9+. I knew how to use SVG but, I was afraid to completely start using it because I have the idea that the support is not that good, until I checked caniuse website. A chart show SVG supportĪt that point, I decided to use SVG (Scalable Vector Graphics). SVG global support is 3% higher than SVG support is 3% higher than using icon fonts. When I learned about icon fonts, I said oh that’s crazy! I didn’t like the way they work and I was happy to get resolution independent icons but, using these icons doesn’t feel safe, since the browser will fallback to another font in case they didn’t load. Unfortunately, If the icon you are using is very important then screen readers will read the class name loud! Icon fonts are a hack ![]() Hard to maintainĮven if you created your own custom font set, using Icomoon for example, every time you decide to add a new icon, you should use the tool to append it and redownload the font files again. Using a ready-made icon fonts will make the browser load font and CSS files that are not necessary. When fonts and css files are getting loaded, that would need time and sometimes the font gets blocked from the browser for some reason. ![]() How icon fonts look before and after the font is loaded What is bad about icon fonts? It has an impact on the website performance I had a good impression about icon fonts and I encountered almost no issues while dealing with them, this did not stay for too long though, and things got completely changed when I noticed an outlined rectangle taking the place of the icon font if the loading process or the connection is slow, I live in Palestine anyway so I don’t expect to get a very high-speed internet. ![]() Back in the days, like nine months ago, I was using font icons as a primary tool to show icons on a web page. ![]()
0 Comments
Leave a Reply. |