时间戳

首页 > 解决方案 > 多行网络图标

css - 多行网络图标

问题描述

我在 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>

标签： cssiconsfont-awesomelines

解决方案

您可以使用位置作为图标

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>

推荐阅读