CODEWITHSUNDEEP
cssmaterialize
DNorthrup
DNorthrup

Reputation: 847

MaterializeCSS - Icons and fonts not aligning

I moved from BS4 to Material, and have been making use of Material Icons but I'm having a consistent issue with alignment. Template Image BreadCrumb

Sometimes it's an obvious change - Such as the breadcrumb, and sometimes it's small as in the case of the button.

I have VERY little CSS that is non-Material, and none of it should be modifying the font.

The CSS I apply to the Breadcrumb to make it align is along the effects of:

.breadcrumb-nav
  height: 35px
  line-height: 35px
  padding-left: 150px

.breadcrumb_current
  border-bottom: 3px solid $divider-color

Which works beautifully, but I have to apply CSS to every Material Icon, or element that has a graphic, currently. Is this a known issue, or am I missing something?

Fiddle: http://jsfiddle.net/awjxfwne/2/

My breadcrumb issue was poor comprehension:

<div class="breadcrumb-nav">
    <div class="nav-wrapper">
        <div class="col s12">
            <a class="breadcrumb">
                <%= link_to 'Home', root_path %>
            </a>
            <a class="breadcrumb ">
                <a class="breadcrumb_current">Statements Overview</a>
            </a>
        </div>
    </div>
</div>

Should have been

<div class="breadcrumb-nav">
    <div class="nav-wrapper">
        <div class="col s12">
                <%= link_to 'Home', root_path, :class => "breadcrumb" %>
                <a class="breadcrumb">Statements Overview</a>
            </a>
        </div>
    </div>
</div>

Upvotes: 1

Views: 961

Answers (3)

luke77
luke77

Reputation: 3703

You may change the icon margin-top to negative value or any value to align it. For example,

<i class="material-icons" style="margin-top:-10px">android</i>

Upvotes: 0

runofthemillgeek
runofthemillgeek

Reputation: 1232

The markup for the icon should be as follows:

<i class="material-icons left">add</i>

Without the left class, your icon will look off.

Upvotes: 4

Chandra Shekhar
Chandra Shekhar

Reputation: 3749

Use this CSS

CSS

.s12 .btn .material-icons{
  vertical-align:middle;
}

Upvotes: 0

Related Questions