From the course: Creating Web Icons with SVG

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Generate cross-browser icons with Grunticon

Generate cross-browser icons with Grunticon

From the course: Creating Web Icons with SVG

Start my 1-month free trial

Generate cross-browser icons with Grunticon

“

- [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…

Contents