Всем доброго времени суток. Возникла у меня одна неприятная проблема. Захотел я маркеры списков заменить на иконки. В Icomoon сделал себе шрифт и все подключил.
И тут то я столкнулся с проблемой. list-style-position работает как inside и когда я хочу чтобы он работал как outside ничего не происходит. Где же мой прокол ?
<ul class="structure">
<li class="icon-page">Одна страница, логотип и заголовок</li>
<li class="icon-image">Картинка и описание предложения</li>
<li class="icon-in-form">Форма для заполнения информации</li>
<li class="icon-send">Кнопка отправки и отзывы клиентов</li>
<li class="icon-out-form">Форма после отправки заявки клиентом</li>
<li class="icon-share">Иконки социальных сетей в подвале</li>
</ul>
li.icon-page, li.icon-image, li.icon-in-form,
li.icon-send, li.icon-out-form, li.icon-share {
color: #FEFEFE;
margin: 20px 0px 20px 5px;
list-style-type: none;
}
li.icon-page:before, li.icon-image:before, li.icon-in-form:before,
li.icon-send:before, li.icon-out-form:before, li.icon-share:before {
font-family: 'gx-icons';
font-size: 1.6em;
vertical-align: middle;
list-style-position: outside;
margin-right: 5px;
padding: 12px;
border-radius: 32px;
color: #3687C4;
background: #212121;
}
И сами иконки:
@font-face {
font-family: 'gx-icons';
src:
url('fonts/gx-icons.ttf?potrwv') format('truetype'),
url('fonts/gx-icons.woff?potrwv') format('woff'),
url('fonts/gx-icons.svg?potrwv#gx-icons') format('svg');
font-weight: normal;
font-style: normal;
}
i {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'gx-icons' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-cms:before {
content: "\e900";
}
.icon-comment:before {
content: "\e901";
}
.icon-controls:before {
content: "\e902";
}
.icon-design:before {
content: "\e903";
}
.icon-dev:before {
content: "\e904";
}
.icon-header:before {
content: "\e905";
}
.icon-image:before {
content: "\e906";
}
.icon-in-form:before {
content: "\e907";
}
.icon-logotype:before {
content: "\e908";
}
.icon-out-form:before {
content: "\e909";
}
.icon-page:before {
content: "\e90a";
}
.icon-responsive:before {
content: "\e90b";
}
.icon-sale:before {
content: "\e90c";
}
.icon-send:before {
content: "\e90d";
}
.icon-seo:before {
content: "\e90e";
}
.icon-share:before {
content: "\e90f";
}
.icon-sign-in:before {
content: "\e910";
}
.icon-support:before {
content: "\e911";
}
.icon-team:before {
content: "\e912";
}
.icon-telephone:before {
content: "\e913";
}