Menu
I am trying to align this paragraph in css. I want the Circle (1) icon to be on the left, but not have the trailing sentence continue under the icon. I've tried looking at making them seperate divs but will just have the Icon come out on top of the paragraph then. Or margin-left will push the "Bold Information too far from the icon on the first line. Any ideas?
<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>
579
asked Dec 13 '25 17:12
You can do this, you don´t need to use font awesome (adjust to your needs)
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
57
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
