将段落与FontAwesome图标对齐

Question

将段落与FontAwesome图标对齐

3

我正在尝试使用CSS对这个段落进行对齐。我希望圆形图标（1）在左侧，但不要让后面的句子继续出现在图标下方。我尝试过将它们分开成不同的div，但图标只会出现在段落的顶部。或者margin-left会使“Bold Information”距离第一行的图标太远。有什么想法吗？

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

- conye9980

1

兄弟，请提供一段代码片段。 - AKASH PANDEY

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Luís P. A. · Accepted Answer

你可以这样做，不需要使用Font Awesome（根据你的需求进行调整）。

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

<span class="number1">your text</span>

DEMO HERE