Join Morten Rand-Hendriksen for an in-depth discussion in this video Create a custom social media menu with Grunticon, part of Web Icons with SVG.
- View Offline
- [Voiceover] Social media and third party service menus…like the one you see here at the bottom of my header…have become fairly ubiquitous in WordPress themes…and other solutions provided by…content management systems, and for good reason.…If they're set up correctly,…they are very easy to manage for the site owner.…All they have to do is go to the back end,…create a new menu, and then point at whatever…social media network or service they want to link to,…and the theme or CSS automatically generates…the icon and displays it in an accessible way.…So if you're using a visual browser,…you see the icon, and if you're using a screen reader,…it reads out the name for each of these icons.…
Now traditionally, these menus are displayed using…font icons, but SVGs are a better solution.…So we're gonna set up an SVG version…of this menu using Grunticon instead.…Before we look at the solution,…let's just briefly inspect the markup…and see how this menu actually works.…If I inspect one of these elements,…you will see that here we have the link.…
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