我正试图在css中对齐这段文字。我希望圆圈(1(图标在左边，但不要让后面的句子在图标下面继续。我试着把它们分开，但只会把图标放在段落的顶部。或者左边的空白处会将"粗体信息"推到离第一行图标太远的地方。有什么想法吗？
<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>你可以做到这一点，你不需要使用字体真棒(根据您的需要进行调整(
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>
此处演示