How to reconcile Font-Awesome and Material Design icon fonts?

5
votes

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.

3
cssfontsmaterial-designfont-awesome
i think that this question is primarily opinion-based as it is currently written. you are more or less asking "how can i make these icons look nice?". i suggest that you edit your question to ask more objectively-answerable questions, such as "how can i modify the material iconset to have the same baseline as fontawesome?" and, if possible, provide some pictures. otherwise, this question will probably be closed. – Woodrow Barlow
from a design point of view, though, there is a reason they don't look nice together. material design icons are designed using a very strict set of rules, and fontawesome's design decisions, in many cases, directly conflict with the canonical material design guidelines. – Woodrow Barlow
@WoodrowBarlow - I got rid of the whining and stuck to the facts. I'm trying to keep the question deliberately wider than asking about "what CSS tag do I use to do x?" - no need to waste SO readers time with that! – Ed Staub
Before more people vote to close this as "primarily opinion-based", you might consider the context of someone who has an app already designed with FontAwesome icons, and just wants to fill a few gaps or replace some PNG icons with font-based ones that aren't in FontAwesome. This is not an opinion about which font is better - it's just simple pragmatism. – Ed Staub

3 Answers

4
votes

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)

.material-icons {
  font: normal normal normal 16px/1 'Material Icons';
  display: inline-block;
  transform: translateY(10%);
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga';
}

enter image description here

3
votes

Better use

font-size: 115%;
vertical-align: text-bottom;

transformations make problems when you use line-height larger than 1

1
votes

I had exactly the same issue of the two fonts just not playing together nicely at all!

No matter what I tried I could not fix this using CSS - each suggestion worked at first but broke down when using different font-sizes etc.

The closest I got with CSS was this:

.material-icons:before {
  position: relative;
  top: 0.135em;
}

In the end though, I used font forge to edit the actual font baseline and now it works a treat.

I also remapped the font into the same structure as Font Awesome so instead of:

<i class="material-icons">alarm_on</i>

I can do

<i class="md md-fw md-alarm-on"></i>

Not how the font was intended to be used and personal preference I know, but I much prefer this way of using icon fonts!