如何在图标旁边显示 h4

Question

我使用的字体很棒，当我尝试显示一个图标后跟一个 h4 时，h4 会转到下一行并且不会停留在图标的右侧。

这是我的代码：<div><i class="fa fa-mobile fa-3x"></i><h4>Telephone</h4></div>

如何让h4不出现在下一行？

Answer 1

只需添加 display:inline; 和 h4，如下所示

display: block 表示元素显示为块，段落和 headers 一直都是这样。一个块在它的上方和下方都有一些空白，并且不允许在它旁边有 HTML 元素，除非另有排序（例如，通过向另一个元素添加 float 声明）。

display:inline表示元素内联显示，在当前块的同一行内。仅当它位于两个块之间时，元素才形成 'anonymous block'，但宽度最小。

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>



<div><i class="fa fa-mobile fa-3x"></i><h4 style="display:inline;">Telephone</h4></div>

Answer 2

您可以为此使用 display : flex;。

我强烈建议您学习 flex 或 css-grid 使用 CSS 在页面上移动元素。

Flex 有很多特性，但同样，您真的应该研究一下！

这是您的解决方案：

div {

    display : flex;
    align-items : center;

}

Answer 3

您可以像这样添加一个浮点数：

<style>
  .title-icon{
        float: left
   }
</style> 

<div>
    <i class="fa fa-mobile fa-3x title-icon"></i>
    <h4>Telephone</h4>
</div>

如何在图标旁边显示 h4

How display h4 next to icon

html

css

icons

twitter-bootstrap

font-awesome