多行网络图标答案

【问题标题】：multiple lines net icon多行网络图标
【发布时间】：2018-07-20 11:49:40
【问题描述】：

我在 FreeCodeCamp 上做项目，我想在图标旁边放两行，但一个在图标下面，我该如何解决？

p {
  display: inline;
  vertical-align: top;
}

.icon-header {
  font-size: 50px;
  color: black;
  margin-left: 5%;
  display: inline-block;
  vertical-align: top;
}

.icon-text {
  display: inline-block;
  float: left;
  color: black;
  font-size: 14px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" >
<i class="fas fa-hand-holding-usd"><p><span class="icon-header">Low Prices</span><br><span class="icon-text">Our graphics cards are so cheap and affordable for everyone</span></p></i>

【问题讨论】：

图标旁边是什么意思？你想让第二行在第一行之后继续吗？如果我们能提供您所期望的图像，那就太好了。
我想要第一行下的第二行（.icon-header 下）
您的第二行当前位于您提供的 sn-p 的第一行之下。那你想要什么改变？屏幕截图会让每个人都轻松。

标签： css icons font-awesome lines

【解决方案1】：

图标可以使用位置

p {
    display: inline-block;
    vertical-align: middle;
    padding-left: 44px;
    position: relative;
}
p i{
    position: absolute;
    left: 0;
    top: 15%;
    font-size: 32px;
}
.icon-header {
  font-size: 50px;
  color: black;
  display: block;
  vertical-align: top;
}

.icon-text {
  display: block;
  float: left;
  color: black;
  font-size: 14px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" >
<p><i class="fas fa-hand-holding-usd"></i> <span class="icon-header">Low Prices</span><span class="icon-text">Our graphics cards are so cheap and affordable for everyone</span></p>

【讨论】：