Добавить пробел между двумя значками для всех разрешений

Question

У меня есть одна статическая строка с двумя значками ion-email и ion-compose.

В моей демонстрации между значками нет пробела. Мне нужно добавить некоторые, но он должен работать для всех разрешений.

<div class="list"> 

    <a class="item item-icon-right" href="#"> 
    <i class="icon ion-email"></i> 
    <i class="icon ion-compose"></i> 
    Check mail 
    </a> 
     </div> 

Мне нужно добавить постоянное пространство между двумя значками.

Вот мой код: http://codepen.io/anon/pen/aOzOWZ

Answer 1

Вам нужно для того чтобы достигнуть этих изменений - codepen

.item-icon-right i.icon { 
    display: inline-block; 
    float: right; 
    position: relative; 
    right: auto; 
} 

Это приведет к следующему CSS, обратите внимание на то закомментированы части:

.item-icon-right .icon { 
    /* right: 11px; */ 
    display: inline-block; 
    float: right; 
} 
.item-icon-left .icon, .item-icon-right .icon { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -moz-box; 
    display: -moz-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-align: center; 
    -ms-flex-align: center; 
    -webkit-align-items: center; 
    -moz-align-items: center; 
    align-items: center; 
    /* position: absolute; */ 
    /* top: 0; */ 
    height: 100%; 
    font-size: 32px; 
} 

Answer 2

Очень простым решением было бы статически позиционировать первый значок.

Просто добавьте этот класс в свой CSS.

.item-icon-right i:nth-child(1) { 
    right: 50px; 
} 

Для более надежного решения, я бы предположить создание стилей для отдельного компонента, который может быть плавал вправо и будет содержать встроенные значки.

.icon-holder-right { 
    float: right; 
} 

Например: http://codepen.io/anon/pen/MwYwqw

Преимущество этого подхода заключается в том, что вы не перезаписывает существующие правила, а это означает, что, скорее всего, чтобы сломать любые другие части вашего приложения нет.

Answer 3

Попробуйте

.icon{ 
 
    position:inherit !important; 
 
    display:inline-block !important; 
 
    float:right; 
 
}