CSS와 함께 FontAwesome 또는 Glyphicons 사용 : before

CSS와 함께 FontAwesome 또는 Glyphicons 사용 : before

---

의사 content:요소를 사용할 때 CSS 요소에 HTML을 포함하는 방법이 :before있습니까?

다음과 같은 사용 사례에서 Font Awesome (또는 Glyphicon)을 사용하고 싶습니다.

    h1:before {
        content: "X";
        padding-right: 10px;
        padding-left: 10px;
        color: @orangeLight;
    }

X와 같은 곳 은 어디에 있습니까 <i class="icon-cut"></i>?

물론 HTML에서 수동으로이 작업을 수행 할 수 있지만 :before이 경우에는 정말로 사용하고 싶습니다 .

마찬가지로 <i>목록 글 머리 기호 로 사용할 수있는 방법이 있습니까? 이것은 작동하지만 여러 줄 글 머리 기호 항목에 대해 올바르게 작동하지 않습니다.

<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>

---

당신이 설명하는 것은 실제로 FontAwesome이 이미하고있는 일입니다. 그들은 FontAwesome font-family를 ::before"icon-"로 시작하는 클래스를 가진 모든 요소 의 유사 요소에 적용합니다 .

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
}

그런 다음 유사 요소 ::before를 사용 하여 클래스가있는 요소에 아이콘을 배치합니다. 방금 http://fortawesome.github.com/Font-Awesome/에 가서 코드를 조사하여 이것을 찾았습니다.

.icon-cut:before {
  content: "\f0c4";
}

따라서 아이콘을 다시 추가하려는 경우 ::after요소를 사용하여 이를 수행 할 수 있습니다 . 또는 질문의 두 번째 부분에서 ::after유사 요소를 사용하여 목록 항목처럼 보이도록 글 머리 기호 문자를 삽입 할 수 있습니다 . 그런 다음 절대 위치를 사용하여 왼쪽 또는 이와 유사한 위치에 배치합니다.

i:after{ content: '\2022';}

---

@ keithwyland 대답은 훌륭합니다. 다음은 SCSS 믹스 인입니다.

@mixin font-awesome($content){
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    text-decoration: inherit;
    content: $content;
}

용법:

@include font-awesome("\f054");

---

목록 항목의 경우 원하는 효과를 얻기 위해 사용할 수있는 약간의 CSS가 있습니다.

ul.icons li {
  position: relative;
  padding-left: -20px; // for example
}
ul.icons li i {
  position: absolute;
  left: 0;
}

OS X의 Safari에서 이것을 테스트했습니다.

---

This approach should be avoided. The default value for vertical-align is baseline. Changing the font-family of only the pseudo element will result in elements with differing fonts. Different fonts can have different font metrics and different baselines. In order for different baselines to align, the overall height of the element would have to increase. See this effect in action.

It is always better to have one element per font icon.

---

The accepted answer (as of 2019 JULY 29) is only still valid if you have not started using the more recent SVG-with-JS approach of FontAwesome. In which case you need to follow the instructions on their CSS Pseudo-Elements HowTo. Basically there are three things to watch out for:

• place the data-attribute on the SCRIPT-Tag "data-search-pseudo-elements" loading the fontawesome.min.js
• make the pseudo-element itself have display:none
• proper font-family & font-weight combination for the icon you need: "Font Awesome 5 Free" and 300 (fal/light), 400 (far/regular) or 900 (fas/solid)

---

This is the easiest way to do what you are trying to do:

http://jsfiddle.net/ZEDHT/

<style>
 ul {
   list-style-type: none;
 }
</style>

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

---

Re: using icon in :before – recent Font Awesome builds include the .fa-icon() mixin for SASS and LESS. This will automatically include the font-family as well as some rendering tweaks (e.g. -webkit-font-smoothing). Thus you can do, e.g.:

// Add "?" icon to header.
h1:before {
    .fa-icon();
    content: "\f059";
}

---

<ul class="icons-ul">
<li><i class="icon-play-sign"></i> <a>option</a></li>
<li><i class="icon-play-sign"></i> <a>option</a></li>
<li><i class="icon-play-sign"></i> <a>option</a></li>
<li><i class="icon-play-sign"></i> <a>option</a></li>
<li><i class="icon-play-sign"></i> <a>option</a></li>
</ul>

All the font awesome icons comes default with Bootstrap.

참고URL : https://stackoverflow.com/questions/11875088/use-fontawesome-or-glyphicons-with-css-before