HTML divはラップしません<i>タグ

Question

私のdivは<i>タグをラップするようにしようとしていますが、折り返しはしません。高さは常にdivの高さです。<i>タグはパディングも余白もありません。多くのことしかし、私は私のスタイルとHTMLコードを追加してい動作しませんが、私はまた、いくつかのスクリーンショット

CSS

<style> 
.material-icons { 
    font-family: 'Material Icons'; 
    font-weight: normal; 
    font-style: normal; 
    font-size: inherit; 
    display: inline-block; 
    line-height: 1; 
    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'; 
} 

.button-content-ic { 
    display: inline-block; 
    margin: auto; 
} 

body, section, div { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
</style> 

HTMLを追加するつもりです

の

<div class="button-content-ic"> 
        <i style="color: #fff;" class="material-icons">menu</i>    </div> 

スクリーンショット

タグ

ラッパータグ

事前にあなたの助けをありがとう。

Answer 1

は、たぶん、これはあなたが探しているものです：

.material-icons { 
 
    font-family: 'Material Icons'; 
 
    font-weight: normal; 
 
    font-style: normal; 
 
    font-size: inherit; 
 
    display: block!important; 
 
    line-height: 1; 
 
    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'; 
 
    color: #ffffff; 
 
} 
 
.button-content-ic { 
 
    background-color: #555555; 
 
    display: inline-block; 
 
    margin: auto; 
 
} 
 
body, 
 
section, 
 
div, 
 
i { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 
<div class="button-content-ic"><i class="material-icons">menu</i> 
 
</div>