icon svg
i'm trying to learn semantic html and css using frontend challenge. What should html tag should I use for icons that is in svg? Still the <i> tag?
3 Replies
Images are included either via the image tag (
<img>)or as one source of the picture element (<picture>/ <source>).
The italic/idiomatic tag (the <i> element) has never been semantically correct and should never be used to enclose an image.I always use icons from fontawesome and it's my first time encountering this. Thank you!
Yeah, fontawesome is…not so awesome anymore. Back when it first came about it was a hack to get easy inline icons/images instead of needing to do inline SVG (which is not only a PITA but not human-readable so when writing your webpage you didn't know what was what). However, font-based icons are horrible for assistive technologies—having an inline image with correct alt text is really the way to go. Especially these days.
It's like how CSS takes what pre-processors like SASS and LESS, or how the JS spec took jQuery and whatnot and incorporated them into the standard. FontAwesome got us to the web we now have and thus isn't needed anymore. Self-obsolescence should be, in my opinion, the goal of anything on the web :p