Align SVG Icons to Text and Say Goodbye to Font Icons

rfp-robotRFP ROBOT: Website Request for Proposal Generator

The time has come for a new website (or website redesign), which means you need to write a website request for proposal or web RFP. A Google search produces a few examples, but they vary wildly and don’t seem to speak really to your goals for developing or redesigning a new website. You need to write a website RFP that will clearly articulate your needs and generate responses from the best website designers and developers out there. But how?

Have no fear, RFP Robot is here. He will walk you through a step-by-step process to help you work through the details of your project and create a PDF formatted website design RFP that will provide the information vendors need to write an accurate bid. RFP Robot will tell you what info you should include, point out pitfalls, and give examples.


Elliot Dahl:
At Pivotal we’ve created an SVG icon system with React for use on our suite of products. This article is about my approach to styling the SVG icon system with CSS to make it easy and effective to use.
Alignment and icons (of any sort) will probably always be a bit tricky. It depends on two things that will be different on every site: the font and the icons. Elliot was able to get perfect alignment with Arial by pulling the icons down with bottom: -0.125em; because Arial sites right along the baseline and the icons themselves were designed with a 12.5% ring of white space around the edges. It’s a fairly common practice to design SVG icons with space along the edges (as annoying as it might be for alignment) because without the space, you might get awkward clipping on the edges with certain browsers/resolutions/zooming/etc (sorry I don’t have more detail handy).
Direct Link to Article — Permalink
Align SVG Icons to Text and Say Goodbye to Font Icons is a post from CSS-Tricks
Source: CssTricks

Posted on January 28, 2017 in arial, css, Design, drupal design,, Drupal Developer, drupal developer austin, Drupal Development, Drupal Support, Expert Drupal Development, The, Web Design Services

Share the Story

Back to Top