如何在 fontawesome 图标和 <p> 元素之间添加 space？

Question

我想在 fontawesome 图标所在的同一行中添加一个 <p> 文本，并在图标和文本之间添加一个 space。这是我的代码：

<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 或显示：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>

如何在 fontawesome 图标和 <p> 元素之间添加 space？

How do I add a space between my fontawesome icon and <p> element?

html

font-awesome