文本旁边的位置图标

Question

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

而且我需要像这样将图标放在文本旁边（图标需要显示在文本的左侧而不移动文本，因此 header 仍然与 [=58= 对齐] 数):

代码：

    <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 会将它移到页面上太远。有没有更好的方法来对齐 divs？

到目前为止尝试过：

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

我需要在图标和文字之间有 space 并与文字对齐。

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

使用边距移动 CSS 中的图标看起来很有效，但它现在移动了带有 phone 数字的第二行：

phone 数字应直接位于 header 文本下方（如上面的第一个屏幕截图所示）

Answer 1

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

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

Answer 2

您可以使用 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>

Answer 3

<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>

Answer 4

这是另一种纯 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>

文本旁边的位置图标

Position icon next to text

html

css

angular

mat-icon