html - 将图标放在段落左侧

我需要在图标JSFiddle Example的右侧放置一个段落：

  <i class="material-icons">check_circle_outline</i>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec fermentum urna, at convallis turpis. Aliquam luctus mauris arcu, eu sodales mauris sagittis at.
  </p>

使用以下CSS：

i {
  font-size: 36px!important;
  display: inline-block;
}

p {
  display: inline-block;
}

他们不会并排出现...

我想念什么？

最佳答案

尝试这个

i {
  font-size: 36px!important;
  position:relative;
  width:35px;
}

p {
  display: inline-block;
  width:85%;
}

div {
  width: 100%;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

<div>
  <i class="material-icons">check_circle_outline</i>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec fermentum urna, at convallis turpis. Aliquam luctus mauris arcu, eu sodales mauris sagittis at.
  </p>
</div>