FontAwesome-как фиксированная ширина на значках дизайна материалов - PullRequest
Новая
       35

FontAwesome-как фиксированная ширина на значках дизайна материалов

0 голосов
/ 02 марта 2019

Я довольно настроен на использование Material Design Icons , потому что у них намного больше значков, ориентированных на ИТ, так что это делает вещи намного проще.Я хотел бы добиться чего-то похожего на функцию фиксированной ширины в FontAwesome, которая обеспечивает равномерное пространство после того, как значок остается неизменным.

Как иконки выглядят в настоящее время:

enter image description here

Как я хочу, чтобы иконки располагались:

enter image description here

AsОднако, насколько я могу судить, MDI не предлагает этого (или я его упускаю), так каковы некоторые способы эффективного достижения чего-то подобного без взлома с помощью !important или установки ненужных полей?

Store-Info 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;
}

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

Заранее спасибо, и стоит отметить, что яне такой уж и передовой, так что если вы видите что-то странное, не стесняйтесь упоминать об этом!

...