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

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

CSS 콘텐츠로 폰트 어썸 아이콘을 사용하고 싶습니다.

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

HTML 코드를 사용할 수 없습니다.content그럼 이미지만 남았나요?

FontAwesome 5에 대한 업데이트 ^{아우렐리엔 덕분에}

변경해야 합니다.font-family로.Font Awesome 5 BrandsORFont 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 이하

그것은 잘못된 사용법입니다.멋진 글꼴 스타일 시트를 열고 다음으로 이동합니다.class사용할 글꼴을 말합니다.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 */
}

데모

유니코드 문자를 수동으로 조작할 필요가 없는 또 다른 솔루션은 글꼴 대박 만들기 - i-태그 없이 아이콘 사용(거부자: 이 기사를 작성했습니다).

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

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

폰트 어썸에서 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;
}

폰트 어썸 5 무료 폰트 패밀리가 작동하려면 폰트 무게를 900으로 설정해야 합니다.

다음은 작동 중인 항목입니다.

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

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에서 유니코드를 사용할 수 있습니다.폰트 awesome 5를 사용하는 경우 구문은 다음과 같습니다.

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

여기에서 문서를 볼 수 있습니다.

FontAwesome 웹사이트 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);
  }
}

다음은 제 웹팩 4 + 폰트 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";
}

언급URL : https://stackoverflow.com/questions/20782368/use-font-awesome-icon-as-css-content