![]() ![]() However, it can be served by a CDN, a fast method if CORS is correctly configured. Performanceįonts are loaded asynchronously, which means blank characters can appear while the font is being loaded.Īll icons are loaded in the font, even if only a few of them are used on the page. ➡️ Icons used as characters should be part of a font. ➡️ Using inline SVG is the best choice if you need color variants of icons, or to customize precise parts of them. SVG are customizable as images and properties fill and stroke allow to redefine colors respectively of the content or the border.Īll parts of the SVG can be separately customized, which is impossible to do with fonts. For emojis used in a text, it could be more relevant, however. Precise positioning is possible with the same properties as text ( font-size, line-height, text-align, etc.), so it is quite painful when icons are used as buttons or images. ![]() Customizationįonts are managed like text and it is therefore possible to customize an icon's Let's dive further into the comparison of the two concurrent methods: inline SVG vs. ✅ Possibility to define title and desc tags ✅ Good experience once the font is configured ✅ Good experience if SVG files are easy to customize ⛔ Difficult to assert images path are valid ⚠️ Painful to regenerate a font, even if some external tools like ⚠️ Font is loaded in parallel: blank characters can appear. ⚠️ Icons are loaded with the DOM: it may slow the page loading, butĮnsures all icons are loaded at the same time as the page ⚠️ Painful positioning as it uses text positioning CSS ✅ All parts of the SVG can be customized finely ⛔ Limited customization, via its div container: ⛔ Limited customization, same as image: size, etc. ⚠️ Customizable like text only: size, color, ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |