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을 사용하는 것이 좋습니다.
답변
해결책:
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
