将段落与FontAwesome图标对齐

conye9980

我正在尝试在CSS中对齐此段。我希望“圆（1）”图标位于左侧，但结尾的句子不要在该图标下方继续。我尝试过将它们分开设置为div，但随后将Icon放在该段落的顶部。否则，左边距将使“粗体信息”离第一行的图标太远。有什么想法吗？

<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <div data-gramm="false" spellcheck="false" style="color: rgb(82, 97, 172); font-family: Lato, serif; font-size: 17px; font-style: normal; font-weight: 300; letter-spacing: 0px; text-align: left; text-decoration: none; vertical-align: top; line-height: 1.3; width: 579px; height: 375px; padding: 20px; min-width: 1px; min-height: 1px; word-wrap: break-word;">

    <span class="fa-stack fa-1x"><i class="fa fa-circle fa-stack-2x"></i><strong class="fa-stack-1x text-primary" style="color: #ffffff">1</strong></span>

    <b> Bold Information </b> en the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic
    typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing <br>
</body>

</html>

路易斯·PA

您可以执行此操作，无需使用超棒的字体（根据需要进行调整）

的CSS

.number1{
  display: block;
  position: relative;
  padding-left: 40px;
}

.number1:before{
  position: absolute;
  content: "1";
  top:0;
  left:0;
  width: 28px;
  height: 28px;
  background: #000;
  color: #fff;
  text-align: center;
  line-height: 28px;
  border-radius: 14px;
}

的HTML