멋진 글꼴 아이콘이있는 사용자 정의 리 목록 스타일

사용자 정의 <li>목록 스타일 유형 을 생성하기 위해 font-awesome (또는 다른 상징적 인 글꼴) 클래스를 사용할 수 있는지 궁금합니다 .

나는 현재 이것을하기 위해 jQuery를 사용하고 있습니다.

$("li.myClass").prepend("<i class=\"icon-chevron-right\"></i>");

그러나 <li>아이콘이 실제 글 머리 기호가 아닌 텍스트의 일부로 간주 되므로 텍스트가 페이지를 가로 질러 줄 바꿈 되면 스타일이 제대로 지정되지 않습니다 .

팁이 있습니까?

CSS 목록 및 카운터 모듈 레벨 3 도입 ::marker의사 요소를. 내가 이해 한 바에 따르면 그런 일을 허용 할 것입니다. 안타깝게도이 기능을 지원하는 브라우저는 없습니다 .

당신이 할 수있는 일은 부모에 약간의 패딩을 추가 ul하고 아이콘을 그 패딩으로 당기는 것입니다.

ul {
  list-style: none;
  padding: 0;
}
li {
  padding-left: 1.3em;
}
li:before {
  content: "\f00c"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
  margin-left: -1.3em; /* same as padding-left set on li */
  width: 1.3em; /* same as padding-left set on li */
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<ul>
  <li>Item one</li>
  <li>Item two</li>
</ul>

패딩 / 글꼴 크기 등을 원하는대로 조정하면됩니다. 일반적인 바이올린은 다음과 같습니다. http://jsfiddle.net/joplomacedo/a8GxZ/

=====

이것은 모든 유형의 아이콘 글꼴에서 작동합니다. 그러나 FontAwesome은이 '문제'를 처리하는 자체 방법을 제공합니다. 자세한 내용은 아래 Darrrrrren의 답변을 확인하십시오.

당으로 글꼴 굉장 문서 :

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check"></i>Barbabella</li>
  <li><i class="fa-li fa fa-check"></i>Barbaletta</li>
  <li><i class="fa-li fa fa-check"></i>Barbalala</li>
</ul>

또는 Jade 사용 :

ul.fa-ul
  li
    i.fa-li.fa.fa-check
    | Barbabella
  li
    i.fa-li.fa.fa-check
    | Barbaletta
  li
    i.fa-li.fa.fa-check
    | Barbalala

FontAwesome에 특화된 더 쉬운 대체 솔루션을 제공하고 싶습니다. 다른 아이콘 글꼴을 사용하는 경우 JOPLOmacedo의 대답은 여전히 ​​사용하기에 완벽합니다.

FontAwesome은 이제 CSS 클래스를 사용하여 내부적으로 목록 스타일을 처리합니다 .

다음은 공식적인 예입니다.

<ul class="fa-ul">
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li>
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
  <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
  <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
</ul>

JOPLOmacedo의 답변에 추가하고 싶었습니다. 그의 해결책은 제가 가장 좋아하는 것이지만, li이 한 줄 이상일 때 항상 들여 쓰기에 문제가있었습니다. 여백 등으로 올바른 들여 쓰기를 찾는 것은 어리석은 일이었습니다. 그러나 이것은 나에게만 해당 될 수 있습니다.

나를 위해 :before의사 요소 의 절대 위치 지정이 가장 잘 작동합니다. 나는 padding-leftul, ul :before과 같은 요소에 남아있는 음수 위치를 설정 했습니다 padding-left. :before오른쪽 요소 에서 콘텐츠의 거리를 얻으려면 padding-leftli에을 설정했습니다 . 물론 li은 상대적인 위치를 가져야합니다. 예를 들면

ul {
  margin: 0 0 1em 0;
  padding: 0 0 0 1em;
  /* make space for li's :before */
  list-style: none;
}

li {
  position: relative;
  padding-left: 0.4em;
  /* text distance to icon */
}

li:before {
  font-family: 'my-icon-font';
  content: 'character-code-here';
  position: absolute;
  left: -1em;
  /* same as ul padding-left */
  top: 0.65em;
  /* depends on character, maybe use padding-top instead */
  /*  .... more styling, maybe set width etc ... */
}

이것이 분명하고 나 이외의 다른 사람에게 가치가 있기를 바랍니다.

나는 이렇게했다 :

li {
  list-style: none;
  background-image: url("./assets/img/control.svg");
  background-repeat: no-repeat;
  background-position: left center;
}

또는 색상을 변경하려면 이것을 시도 할 수 있습니다.

li::before {
  content: "";
  display: inline-block;
  height: 10px;
  width: 10px;
  margin-right: 7px;

  background-color: orange;
  -webkit-mask-image: url("./assets/img/control.svg");
  -webkit-mask-size: cover;
}

@OscarJovanny 코멘트에서 영감을 얻은 두 가지 작업을 몇 가지 해킹으로 수행했습니다.

1 단계:

• 여기 에서 아이콘 파일을 svg로 다운로드하십시오. 글꼴 awesome 에서이 아이콘 만 필요하기 때문입니다.

2 단계:

<style>
ul {
    list-style-type: none;
    margin-left: 10px;
}

ul li {
    margin-bottom: 12px;
    margin-left: -10px;
    display: flex;
    align-items: center;
}

ul li::before {
    color: transparent;
    font-size: 1px;
    content: " ";
    margin-left: -1.3em;
    margin-right: 15px;
    padding: 10px;
    background-color: orange;
    -webkit-mask-image: url("./assets/img/check-circle-solid.svg");
    -webkit-mask-size: cover;
}
</style>

결과