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
From the course: Creating Web Icons with SVG
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
-
(Locked)
Overview of this method1m 28s
-
(Locked)
Generate cross-browser icons with Grunticon4m 46s
-
(Locked)
Display Grunticon SVG icons in HTML documents3m 27s
-
(Locked)
Generate cross-browser icons in the command line using Grunticon5m 6s
-
(Locked)
Display Grunticon SVG icons in HTML documents3m 59s
-
(Locked)
-
-