Font Awesome 아이콘을 CSS 컨텐츠로 사용

Font Awesome 아이콘을 CSS 내용으로 사용하고 싶습니다.

a:before {
    content: "<i class='fa...'>...</i>";
}

에서 HTML 코드를 사용할 수 없다는 것을 알고 content있으므로 이미지 만 남아 있습니까?

^{Aurelien 덕분} 에 FontAwesome 5 업데이트

당신은을 변경할 필요 font-family로 Font Awesome 5 Brands하거나 Font Awesome 5 Free당신이 렌더링하려고하는 아이콘의 유형에 따라. 또한 선언하는 것을 잊지 마십시오font-weight: 900;

a:before {
   font-family: "Font Awesome 5 Free";
   content: "\f095";
   display: inline-block;
   padding-right: 3px;
   vertical-align: middle;
   font-weight: 900;
}

데모

아래의 나머지 답변을 읽고 작동 방식을 이해하고 아이콘과 텍스트 사이의 간격에 대한 해결 방법을 알 수 있습니다.

FontAwesome 4 이하

그것을 사용하는 잘못된 방법입니다. 글꼴 멋진 스타일 시트를 열고 classsay 사용하려는 글꼴 로 이동하여 fa-phone해당 클래스 아래의 컨텐츠 특성을 엔티티와 함께 ​​복사 한 후 다음과 같이 사용하십시오.

a:before {
    font-family: FontAwesome;
    content: "\f095";
}

데모

특정 a태그 를 타겟팅하려는 경우 class대신 다음 과 같이보다 구체적인 태그를 사용하는 것이 좋습니다.

a.class_name:before {
    font-family: FontAwesome;
    content: "\f095";
}

위의 방법을 사용하면 아이콘에 나머지 텍스트가 붙어 있으므로 두 텍스트 사이에 약간의 공간이 필요하면 다음 display: inline-block;을 사용하십시오 padding-right.

a:before {
    font-family: FontAwesome;
    content: "\f095";
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
}

많은 사람들이 호버에서 아이콘을 변경해야 할 필요가 있기 때문에이 답변을 더 확장하면 별도의 선택기와 :hover작업 규칙을 작성할 수 있습니다 .

a:hover:before {
    content: "\f099"; /* Code of the icon you want to change on hover */
}

데모

위의 예에서, 크기가 다르기 때문에 아이콘이 조금 움직이며 반드시 원하지 않으므로 width기본 선언에 고정 을 설정할 수 있습니다

a:before {
    /* Other properties here, look in the above code snippets */
    width: 12px; /* add some desired width here to prevent nudge */
}

데모

유니 코드 문자를 수동으로 엉망으로 만들지 않아도되는 또 다른 해결책은 Font Awesome awesome-i-tags가없는 아이콘 사용 ( 면책 조항 :이 기사를 작성했습니다 )에서 찾을 수 있습니다.

간단히 말해서 다음과 같이 새 클래스를 만들 수 있습니다.

.icon::before {
    display: inline-block;
    margin-right: .5em;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
}

그런 다음 아무 아이콘이나 사용하십시오.

<a class="icon fa-car" href="#">This is a link</a>

font-awesome에서 SCSS 파일에 액세스 할 수 있으면 다음과 같은 간단한 솔루션을 사용할 수 있습니다.

.a:after {
    // Import mixin from font-awesome/scss/mixins.scss
    @include fa-icon();

    // Use icon variable from font-awesome/scss/variables.scss
    content: $fa-var-exclamation-triangle;
}

a:before {
     content: "\f055";
     font-family: FontAwesome;
     left:0;
     position:absolute;
     top:0;
}

링크 예 : https://codepen.io/bungeedesign/pen/XqeLQg

https://fontawesome.com/cheatsheet?from=io 에서 아이콘 코드 가져 오기

CSS에서 유니 코드를 사용할 수 있습니다. font awesome 5를 사용하는 경우 이것이 구문입니다.

.login::before {
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
    content: "\f007";  
}

여기에서 해당 설명서를 볼 수 있습니다 .

Font Awesome 5 Free에 대해 글꼴 두께를 900으로 설정해야합니다 font-family가 작동 해야합니다.

이것은 작동하는 것입니다.

.css-selector::before {
   font-family: 'Font Awesome 5 Free';
   content: "\f101";
   font-weight: 900;
}

FontAwesome 웹 사이트에서 말한대로 FontAwesome =>

HTML :

<span class="icon login"></span> Login</li>

CSS :

 .icon::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }

    .login::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f007";
   }

에서 .login::before-> content:'';유니 코드에 맞게 편집 하십시오.

SCSS를 사용한 Font Awesome 5 업데이트

.icon {
  @extend %fa-icon;
  @extend .fas;

  &:before {
    content: fa-content($fa-var-user);
  }
}

여기 내 webpack 4 + font awesome 5 솔루션이 있습니다.

웹팩 플러그인 :

new CopyWebpackPlugin([
    { from: 'node_modules/font-awesome/fonts', to: 'font-awesome' }
  ]),

글로벌 CSS 스타일 :

@font-face {
    font-family: 'FontAwesome';
    src: url('/font-awesome/fontawesome-webfont.eot');
    src: url('/font-awesome/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
    url('/font-awesome/fontawesome-webfont.woff2') format('woff2'),
    url('/font-awesome/fontawesome-webfont.woff') format('woff'),
    url('/font-awesome/fontawesome-webfont.ttf') format('truetype'),
    url('/font-awesome/fontawesome-webfont.svgfontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

i {
    font-family: "FontAwesome";
}