0

我非常愿意使用Material Design 图标，因为它们有更多面向 IT 的图标，所以它让事情变得更容易。我想实现类似于 FontAwesome 的 Fixed Width 功能的东西，它确保图标后有一个均匀的空间，保持一致。

图标当前的外观：

在此处输入图像描述

我希望图标如何间隔：

在此处输入图像描述

然而，据我目前所知，MDI 不提供此功能（或者我错过了它），那么有哪些方法可以有效地实现类似的目标，而无需修改!important或设置不必要的边距？

商店信息 CSS：

.heading-block {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 1em;
margin: 5px 0;
}

.heading-content > .store-info p {
font-weight: 600;
font-size: 1em;
line-height: 10px;
margin: 1.7em 0;
}

.heading-content > .store-info {
margin-left: 1.5em;
}

商店信息 HTML：

<div class="heading-content">
    <div>
        <span contenteditable="true" id="store-number" class="store-number">{{ store.store_number }} </span><span class="divider">/</span><span class="store-name">{{store.name}}</span>
    </div>
    <div class="store-info">
        <p id="address_full"><span class="mdi mdi-map-marker"></span>{{ store.street_address }} {{ store.city }}, {{ store.state }} {{ store.postal }}</p>
        <p id="address_pull_hidden" style="display:none;">{{ store.street_address }} {{ store.city }} {{ store.state }} {{ store.postal }}</p>
        <p>
            <span class="mdi mdi-earth"> </span>
            {{ store.timezone }}
        </p>

        <p>
            <span class="mdi mdi-phone"></span>
            {{ store.phone }}
        </p>

        {% if not store.mpls_only %}
        <p>
            <span class="mdi mdi-phone-voip"></span>
            {{ store.xo_tn }}
        </p>
        {% endif %}

        {% if store.mpls_only %}
        <p>
            <span class="mdi mdi-phone-classic"></span>
            MPLS Only
        </p>
        {% endif %}


        <p>
            <span class="mdi mdi-map-marker"></span>
            <span id="local-time">00:00:00 am</span>
            <span class="status open">{{ store.status }}</span>
        </p>

        <p class='store-closed' style="display: none;">
            <span class="mdi mdi-map-marker"></span>
            Close Reason: <span class="close_reason">{{ store.close_reason }}</span>
        </p>

        <p class="weather"><span class="mdi mdi-weather-cloudy"><span id="weather-main">Clear</span></p>
        <a target='_blank' class="edit" href="/admin/stores/store/{{store.pk}}/change/">Edit information for Store {{store.store_number}}</a>
    </div>
</div>
<br>
<div id="map-wrapper">
    <div id="map-container" class="container">
        <div id="map"></div>
        <div id="pano"></div>
    </div>
</div>

在此先感谢，并且值得注意的是，我不是一个前端人员，所以如果您看到一些看起来很奇怪的东西，请随时提及！

4

1 回答 1

0

您可以创建一个类来实现这一点。

.mat-fw {
text-align: center;
width: 1.25em;
}
于 2019-12-08T05:54:28.283 回答