list-style-position не работает

[Aleksandr.Bycyk]

Всем доброго времени суток. Возникла у меня одна неприятная проблема. Захотел я маркеры списков заменить на иконки.  В 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";
}

 

[klierik]

  On 6/15/2017 at 8:36 AM, Aleksandr.Bycyk said:

И тут то я столкнулся с проблемой. list-style-position работает как inside и когда я хочу чтобы он работал как outside ничего не происходит. Где же мой прокол ?

Expand  

используй "position: absolute;" для ":before {}"

[Catherine]

list-style-position должен применяться к элементу, а в приведённом коде он указан для li:before.

[Aleksandr.Bycyk]

  On 6/16/2017 at 8:54 AM, Catherine said:

list-style-position должен применяться к элементу, а в приведённом коде он указан для li:before.

Expand  

Это я понимаю. Вопрос в том как это реализовать ? Пока не соображу. По идее можно было маркеры сделать при помощи картинок. Но тогда это будет занимать больше места. и сайт будет дольше грузиться. Можно и по корявому, но не хочу. Типа 2 инлайн блока, 1 значок а второй сам текст.

[Aleksandr.Bycyk]

  On 6/16/2017 at 1:17 PM, klierik said:

используй "position: absolute;" для ":before {}"

Expand  

Хорошее решение, только забыл добавить что для li "position: relative;" А так годно. Спасибо большое.

[klierik]

не забыл, предполагалось что это и так очевидно )