Does anyone have a good stylesheet snippet for making FontAwesome and the Material-Design icon font work well together spatially – to make Material-Design icons play well in a mostly FontAwesome site? The styles, baselines, widths are different – maybe more. The stock "material-icons" CSS class fixes the font-size at 24px. Also, the effective baseline for the Material-Design icons is far above the text baseline.
So far I've patched Google's "material-icons" CSS class with:
{
font-size: 150%;
transform: translate(-10%,20%);
}
The Material-Design icons are also wider than the Font-Awesome set – I haven't decided how to address that yet. I haven't used many icons – there may be more issues with ones I haven't tried.
Best Answer
I use the following code for use in navbars, buttons, wells, accordions, forms and a few other places, change it to suit your needs (you may want it perhaps bigger or thicker)