단일 목록 항목 요소와 함께 글 머리 기호에 Font Awesome 아이콘 사용

CMS에서 정렬되지 않은 목록의 글 머리 기호로 Font Awesome ( http://fortawesome.github.com/Font-Awesome/ ) 아이콘 을 사용할 수 있기를 원합니다 .

CMS의 텍스트 편집기는 원시 HTML 만 출력하므로 추가 요소 / 클래스를 추가 할 수 없습니다.

이는 마크 업이 다음과 같이 표시 될 때 아이콘을 표시한다는 의미입니다.

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Font Awesome에 다른 font-family 속성이 필요한지 확인할 수있는 첫 번째 문제는 별도의 요소가 필요합니다.

순수한 CSS를 사용하여 가능합니까? 아니면 jQuery와 같은 것을 사용하여 각 목록 항목의 시작 부분에 요소를 추가해야합니까?

배경 이미지를 대체 할 수 있지만 가능하면 Font Awesome을 사용하는 것이 좋습니다.

해결책:

http://jsfiddle.net/VR2hP/

ul li:before {    
    font-family: 'FontAwesome';
    content: '\f067';
    margin:0 5px 0 -15px;
    color: #f00;
}

이 기술을 자세히 설명 하는 블로그 게시물 이 있습니다.

새로운 fontawesome (버전 4.0.3)을 사용하면이 작업을 쉽게 수행 할 수 있습니다. 우리는 단순히 다음 클래스를 사용합니다.

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons (like these)</li>
  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>to replace</li>
  <li><i class="fa-li fa fa-square"></i>default bullets in lists</li>
</ul>

이 (새로운) url에 따르면 : http://fontawesome.io/examples/#list

위의 답변 중 일부를 기반으로하고 다른 곳에서 제공하고 : before pseudo class 와 함께 절대 위치 지정 을 사용하는 것이 좋습니다 . 위의 많은 예제 (및 유사한 질문에서)는 Font Awesome의 처리 방법을 포함하여 사용자 정의 HTML 마크 업을 사용하고 있습니다. 이것은 원래의 질문에 위배되며 반드시 필요한 것은 아닙니다.

여기 데모

ul {
  list-style-type: none;
  padding-left: 20px;
}

li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px
}

li:before {
  position: absolute;
  top: 0;
  left: 0;
  font-family: FontAwesome;
  content: "\f058";
  color: green;
}

기본적으로 그렇습니다. Font Awesome cheatsheet 의 CSS 내용에 사용할 ISO 값을 얻을 수 있습니다 . 백 슬래시가 앞에 붙은 마지막 4 개의 영숫자를 사용하십시오. 그래서 []이된다\f058

예제 페이지 에 정렬되지 않은 목록과 함께 Font Awesome을 사용하는 방법에 대한 예제가 있습니다.

<ul class="icons">
  <li><i class="icon-ok"></i> Lists</li>
  <li><i class="icon-ok"></i> Buttons</li>
  <li><i class="icon-ok"></i> Button groups</li>
  <li><i class="icon-ok"></i> Navigation</li>
  <li><i class="icon-ok"></i> Prepended form inputs</li>
</ul>

이 코드를 시도한 후에도 작동하지 않으면 라이브러리를 올바르게 포함하지 않은 것입니다. 그들의 웹 사이트에 따르면 다음과 같은 라이브러리를 포함해야합니다.

<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/font-awesome.css">

또한 그의 웹 사이트 CSS Tricks 에서 아이콘 글꼴 에 관한 기발한 Chris Coyier의 게시물을 확인하십시오 .

여기에 자신의 아이콘 글꼴 얼굴을 만드는 방법에 대한 스크린 캐스트 가 있습니다.

@Tama,이 답변을 확인하고 싶을 수도 있습니다 : Font Awesome 아이콘을 글 머리 기호로 사용

기본적으로 FontAwesome과 다른 답변에서 제안한대로 추가 마크 업이 필요없이 CSS 만 사용하여이를 수행 할 수 있습니다.

다시 말해, 초기 게시물에서 언급 한 것과 동일한 기본 마크 업을 사용하여 필요한 것을 달성 할 수 있습니다.

<ul>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>

감사.

표준 <ul>및 <i>내부를 사용하는 솔루션<li>

  <ul>
    <li><i class="fab fa-cc-paypal"></i> <div>Paypal</div></li>
    <li><i class="fab fa-cc-apple-pay"></i> <div>Apple Pay</div></li>
    <li><i class="fab fa-cc-stripe"></i> <div>Stripe</div></li>
    <li><i class="fab fa-cc-visa"></i> <div>VISA</div></li>
  </ul>

여기 데모

Font Awesome 5에서는 위의 답변 중 일부와 마찬가지로 순수한 CSS를 사용하여 수정할 수 있습니다.

ul {
  list-style-type: none;
}

li:before {
  position: absolute;
  font-family: 'Font Awesome 5 free';
          /*  Use the Name of the Font Awesome free font, e.g.:
           - 'Font Awesome 5 Free' for Regular and Solid symbols;
           - 'Font Awesome 5 Brand' for Brands symbols.
           - 'Font Awesome 5 Pro' for Regular and Solid symbols (Professional License);
          */
  content: "\f1fc"; /* Unicode value of the icon to use: */
  font-weight: 900; /* This is important, change the value according to the font family name
                       used above. See the link below  */
  color: red;
}

올바른 글꼴 가중치가 없으면 빈 사각형 만 표시됩니다.

https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements#define