如何在我的字体图标和元素之间添加一个空格<p>？

Question

我想在我的fontawesome图标的同一行添加一个<p>文本，在图标和文本之间有一个空格。下面是我的代码:

<i class="fas fa-exclamation-circle">&nbsp;</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>

但是文本总是从下一行开始。我哪里做错了?请帮帮我

Answer 1

如果您不更改p标记的显示，则它将始终在新行开始

所以使用span或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">&nbsp;</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">&nbsp;</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>