我根本不知道这里发生了什么，我使用了 fontawesome答案

【问题标题】：I have simply no idea what happened here, I used fontawesome我根本不知道这里发生了什么，我使用了 fontawesome
【发布时间】：2019-01-20 22:52:37
【问题描述】：

Screenshot of the Webpage

在格式化之前部分中的一些内容之后（这绝对不会对本部分产生影响），这才发生。所有名称的字体大小为 4em (h4)。但不知何故，它显示为不同的大小。它搞砸了我的间距并将这个图标放在任何地方。

我完全不知道是什么原因造成的。

<section class="panel configuration" data-section-name="configuration">
<div class="inner">
<h2>Unser Team</h2>
<p><b>Wir sind im Grunde Ihre Lieblingsleute, die auch tolle Webseiten erstellen, Logos entwerfen und Ihnen helfen, Ihr Geschäft bekannt zu machen, wir sind uns sicher, dass Sie uns mögen werden.</b></p>

<div class="rowz">
        <div class="windowz" style="background: linear-gradient(#ffffff2c, #ffffff05)">
                <div>
                    <img style="border-radius: 50%" src="img/avatar-2.jpg" width="150" height="150">
                    <h4>Luan B</h4>
                    <h3>Gründer und Designer</h3>
                    <i class="fas fa-pencil-alt"></i></i><i class="fas fa-file-code"></i>
                  </div>
            </div>

<div class="windowz" style="background: linear-gradient(#ffffff2c, #ffffff05)">
                <div>
                    <img style="border-radius: 50%" src="img/avatar-1.jpg" width="150" height="150">
                    <h4>Loris K</h4>
                    <h3>Designer</h3>
                    <i class="fas fa-pencil-ruler"></i> <i class="fas fa-swatchbook"></i>
                  </div>
            </div>

    <div class="windowz" style="background: linear-gradient(#ffffff2c, #ffffff05)">
        <div>
            <img style="border-radius: 50%" src="img/avatar-3.jpg" width="150" height="150">
            <h4>Lino P</h4>
            <h3>Backend-Developer</h3>
            <i class="far fa-file-code"></i> <i class="fas fa-code"></i>
    </div></div>
    </div>
    </div>

这就是部分。我将非常感谢您的帮助。提前致谢。

PS 正常标题和一般字体也不应该这么大

【问题讨论】：

您的代码中没有任何内容可以控制字体大小或间距。
当然 - 引入 FontAwesome ... 或 Bootstrap ... 或 ANY 新的/更改的/附加的 CSS 可能会“搞砸”。建议：使用谷歌开发者工具，分析你感兴趣的 HTML 元素有无 FontAwesome 的区别。这里有一个很好的教程（你可以通过谷歌搜索找到很多）：developers.google.com/web/tools/chrome-devtools/beginners/css
我注意到第一行使用了一个很棒的字体图标。您有两个 </i> 结束标签。这可能会弄乱您文档的其余部分。

标签： html css font-size font-awesome-5

【解决方案1】：

这是由于代码中的错误。在第一个“windowz”块中有双结束标记。删除一个结束 i 标记，它应该可以工作。

【讨论】：

什么应该起作用？没有打开的 块 - 浏览器将忽略错误的结束标记

【解决方案2】：

错误是双重的</i>

&lt;i class="fas fa-pencil-alt"&gt;&lt;/i&gt;&lt;/i&gt;

代替

&lt;i class="fas fa-pencil-alt"&gt;&lt;/i&gt;

【讨论】：