文本旁边的位置图标答案

【问题标题】：Position icon next to text文本旁边的位置图标
【发布时间】：2021-01-28 00:17:07
【问题描述】：

我创建了一个显示图标和文本的 div，但我需要将图标放在文本旁边而不是在其上方。目前看起来像这样：

我需要像这样将图标放在文本旁边（图标需要显示在文本的左侧而不移动文本，以便标题仍然与电话号码对齐）：

代码：

    <div fxLayout="row" fxLayoutAlign="space-around center">
            <div>
                <mat-icon svgIcon="phone-outline"> </mat-icon>
                <h3>Customer Support</h3>
                <label>123456</label>
            </div>
         <div>
            <mat-icon svgIcon="email-outline"> </mat-icon>
            <h3>Email</h3>
            <label>test@email.com</label>
        </div>
        <div>
            <mat-icon svgIcon="map-marker-outline"> </mat-icon>
            <h3>Address</h3>
            <label>address line 1</label>
        </div>
   </div>

我有三个 div 并使用 fxLayoutAlign 将它们在页面上彼此相邻对齐，但如果我将图标放入单独的 div 中，fxLayoutAlign 会将其在页面上移动得太远。有没有更好的方法来对齐 div？

到目前为止尝试过：

尝试将图标与文本放在同一行，但图标太靠近文本： <h3><mat-icon svgIcon="phone-outline"> </mat-icon> Customer Support</h3>

我需要在图标和文本之间留出空间，并将其与文本对齐。

使用 CSS 尝试对齐仍然会导致图标离文本太近（并且未正确对齐）： .align-items { display: flex; justify-content: space-between; } .align-content { display: flex; align-items: center; }

使用边距在 CSS 中移动图标看起来可以正常工作，但现在它已经移动了第二行的电话号码：

电话号码应该直接在标题文本下方（如上面的第一个屏幕截图）

【问题讨论】：

标签： html css angular mat-icon

【解决方案1】：

这是另一种纯 css 的方法。

css

.align-items {
  display: flex;
  justify-content: space-between;
}

.align-content {
  display: flex;
}

mat-icon {
  margin-right: 10px;
}

.align-text-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

h3 {
  margin-top: 0px;
}

html

<div class="align-items ">
    <div class="align-text-item">
        <div class="align-content">
            <mat-icon svgIcon="thumbs-up" aria-hidden="false" aria-label="Example thumbs up SVG icon"></mat-icon>
            <div>
                <h3>Customer Support</h3>
                123456
            </div>
        </div>
    </div>
    <div class="align-text-item">
        <div class="align-content">
            <mat-icon svgIcon="thumbs-up" aria-hidden="false" aria-label="Example thumbs up SVG icon"></mat-icon>
            <div>
                <h3>Email</h3>
                123456
            </div>

        </div>

    </div>
    <div class="align-text-item">
        <div class="align-content">
            <mat-icon svgIcon="thumbs-up" aria-hidden="false" aria-label="Example thumbs up SVG icon"></mat-icon>
            <div>
                <h3>Address</h3>
                123456
            </div>
        </div>
    </div>
</div>

【讨论】：

请参阅编辑后的问题，了解如何使用此 CSS 外观。可惜图标离文字太近，与文字不对齐
我用另一个图标进行了测试，它与文本对齐。你能分享一下stackblitz吗？
使用边距可以移动图标，但现在标题文本下的电话号码已经移动。我编辑了我的问题以包含现在的截图
检查这个stackblitz 如果没问题，更新我的答案
是的，stackblitz 可以正确显示图标，因此我将其标记为已接受答案。但是您知道如何将文本 123456 与标题对齐吗？所以 123456 应该在客户支持、电子邮件和地址下对齐

【解决方案2】：

为包裹图标和标题的 div 创建一个类。不需要 fxLayout

.align-icon{
    display: flex;
    align-items: flex-end;
}

【讨论】：

我使用的是 fxLayout，所以 3 个 div 是分开的（第一个 div 在左边，第二个在中间，第三个在右边）。如果我删除 fxLayout ，则 div 现在会在彼此下方。并且使用此类的图标和文本之间没有空格

【解决方案3】：

您可以使用matPrefix 和matSuffix

<mat-form-field class="example-full-width">
    <mat-icon matPrefix>mode_edit</mat-icon>
    <mat-label>EXAMPLE</mat-label>
    <mat-icon matSuffix>mode_edit</mat-icon>
</mat-form-field>

【讨论】：

我不能使用 mat-form-field 因为我只使用 h3 和标签标签。使用此代码会导致错误 - 错误：mat-form-field must contain a MatFormFieldControl

【解决方案4】：

<div fxLayout="row" fxLayoutAlign="space-around center">
            <div>               
                <h3>Customer Support<mat-icon svgIcon="phone-outline"> </mat-icon></h3>
            </div>
         <div>
            <mat-icon svgIcon="email-outline"> </mat-icon>
            <h3>Email</h3>
        </div>enter code here
        <div>
            <mat-icon svgIcon="map-marker-outline"> </mat-icon>
            <h3>Address</h3>
        </div>
   </div>

【讨论】：

这会使图标离文本太近。我需要图标和文本之间的空间。请查看已编辑的问题 - 我已经附上了图标的截图