Join Morten Rand-Hendriksen for an in-depth discussion in this video Generate cross-browser icons with Grunticon, part of Web Icons with SVG.
- [Voiceover] In this chapter,…we'll focus on the social media menu that appears…on the bottom of a page.…Right now, the social media menu displays icons…in the form of transparent PNGs that are superimposed…on top of regular CSS boxes with rounded corners.…So the icons are only the white you see here.…The circles are generated using CSS on the Fly.…Just like with all the other icons on the page,…I want to swap out these PNGs with SVGs…and make them backwards compatible to older browsers.…Now before I do that,…I need to explain how this social media menu works.…
In index.html you'll find the social media menu…towards the bottom of the document.…It's right here,…nav, social, nav.…Inside we have a list of items,…each with its own anchor.…The anchors have a class, icon linkedin,…icon Twitter, icon Facebook,…and so on.…And these classes are used to inject…the actual icons.…Then inside each of the links…we have a span with a classic screen reader text…that wraps around the name of the social media network.…This markup creates a fully accessible menu,…
SVG is an XML-based method for instructing the browser to draw scalable vector graphics based on defined shapes and coordinates. The challenge with SVGs is they are not like other graphic files: Rather than a grid of pixels, they are code instructions interpreted by the browser on the fly. This poses some unique challenges and unique opportunities when it comes to implementation. In this course, you'll learn various methods to deploy SVG icons in webpages, each with its own use cases, benefits, and drawbacks. Morten Rand-Hendriksen shows how to insert individual SVG images, add SVGs as inline elements and SVG sprites via the command line, and automate SVGs with Grunticon. Plus, get tips on making your graphics backward-compatible and accessible, and using SVG icons in WordPress.
- SVG vs. icon fonts
- Getting existing SVG icons
- Creating your own icons
- Adding individual SVG icons to webpages
- Adding SVG as an inline element or background image
- Using external and inline SVG sprites
- Automating SVG generation with Grunticon
- Using SVG icons in WordPress