Jump to content
  • 0

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


Aleksandr.Bycyk
 Share

Question

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

 

Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0
3 часа назад, Catherine сказал:

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

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

Link to comment
Share on other sites

  • 0
On 6/15/2017 at 11:36 AM, Aleksandr.Bycyk said:

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

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

  • Like 1
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy