Question

我很乐意使用Material Design Icons，因为它们具有更多面向IT的图标，因此使事情变得更加容易。我想实现类似于FontAwesome的“固定宽度”功能，该功能可确保图标后的空间保持一致。

图标的当前外观：

我希望图标如何隔开：

但是，据我所知，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>

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

Answer 1

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

.mat-fw {
text-align: center;
width: 1.25em;
}

材质设计图标上类似FontAwesome的固定宽度

1 个答案: