I want to add a <p> text in the same line as that of my fontawesome icon, with a space in between the icon and the text. This is my code below:
<i class="fas fa-exclamation-circle"> </i><p id="first-info">Only <p style="color: greenyellow;">Admin</p> is allowed full priviledges whereas <p style="color: red;">User</p> is
allowed partial priviledges.</p>
But the text starts always from the next line. Where have I gone wrong? Please help me
CodePudding user response：
If you do not change the display of a p tag, then it will ALWAYS start on a new line
So use spans or display: inline-block
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<i class="fas fa-exclamation-circle"> </i><span class="first-info">Only <span style="color: greenyellow;">Admin</span> is allowed full priviledges whereas <p style="color: red;">User</span> is allowed partial priviledges.</span>
p.first-info { display: inline-block }<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<i class="fas fa-exclamation-circle"> </i><p class="first-info">Only <span style="color: greenyellow;">Admin</p> is allowed full priviledges whereas <p style="color: red;">User</span> is allowed partial priviledges.</p>