CSS에서 글꼴 멋진 아이콘 사용

다음과 같은 CSS가 있습니다.

#content h2 {
   background: url(../images/tContent.jpg) no-repeat 0 6px;
}

Font Awesome 의 아이콘으로 이미지를 바꾸고 싶습니다 .

어쨌든 CSS의 아이콘을 배경 이미지로 사용하지 않습니다. Font Awesome 스타일 시트 / 글꼴이 CSS보다 먼저로드되었다고 가정 할 수 있습니까?

당신은 배경 이미지로 텍스트를 사용할 수 있지만 사용할 수 있습니다 :before또는 :after지저분한 추가 마크 업의 모든 종류를 추가 할 필요없이, 당신이 그것을 원하는 텍스트 문자를 배치 할 의사 클래스를.

position:relative위치가 작동하도록 실제 텍스트 래퍼에 설정하십시오 .

.mytextwithicon {
    position:relative;
}    
.mytextwithicon:before {
    content: "\25AE";  /* this is your text. You can also use UTF-8 character codes as I do here */
    font-family: FontAwesome;
    left:-5px;
    position:absolute;
    top:0;
 }

편집하다:

Font Awesome v5는 이전 버전 이외의 다른 글꼴 이름을 사용합니다.

• FontAwesome v5, 무료 버전의 경우 다음을 사용하십시오. font-family: "Font Awesome 5 Free"
• FontAwesome v5, Pro 버전의 경우 다음을 사용하십시오. font-family: "Font Awesome 5 Pro"

동일한 글꼴 가중치 속성도 설정해야합니다 (900으로 나타남).

글꼴 이름을 찾는 또 다른 방법은 페이지에서 샘플 글꼴 멋진 아이콘을 마우스 오른쪽 단추로 클릭하고 글꼴 이름을 얻는 것입니다 (utf-8 아이콘 코드를 찾을 수있는 것과 같은 방법이지만에서 찾을 수 있음에 유의하십시오 :before).

위의 Diodeus의 답변 외에도 font-family: FontAwesome규칙 이 필요합니다 ( @font-faceCSS에서 FontAwesome에 대해 이미 선언 된 규칙 이 있다고 가정 ). 그런 다음 어떤 CSS 내용 값이 어떤 아이콘에 해당하는지 알아야합니다.

나는 여기에 모두 나열했습니다 : http://astronautweb.co/snippet/font-awesome/

실제로 font-awesomeCSS 조차도 아이콘 스타일을 설정하는 비슷한 전략을 가지고 있습니다. icon 코드를 빨리 잡고 싶다면 non-minified font-awesome.css파일을 확인하십시오 . 순서대로 각 글꼴이 있습니다.

위의 모든 것을 통합하면 다음은 잘 작동하는 최종 클래스입니다.

   .faArrowIcon {
        position:relative;
    }

    .faArrowIcon:before {
        font-family: FontAwesome;
        top:0;
        left:-5px;
        padding-right:10px;
        content: "\f0a9"; 
    }

이 예제 클래스를 사용해 볼 수 있습니다. 여기에서 아이콘 컨텐츠를 찾으십시오 : http://astronautweb.co/snippet/font-awesome/

  #content h2:before {
    display: inline-block;
    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);
    content: "\f007";
    }

CSS를 사용하여 멋진 글꼴을 사용하려면 다음 단계를 따르십시오.

1 단계-CSS에서 FontAwesome의 글꼴 추가

/*Font Awesome Fonts*/
@font-face {
    font-family: 'FontAwesome';
    //in url add your folder path of FontAwsome Fonts
    src: url('font-awesome/fontawesome-webfont.ttf') format('truetype');
}

2 단계-CSS 아래 요소를 사용하여 HTML의 클래스 요소에 글꼴을 적용하십시오.

.sorting_asc:after {
    content: "\f0de"; /* this is your text. You can also use UTF-8 character codes as I do here */
    font-family: FontAwesome;
    padding-left: 10px !important;
    vertical-align: middle;
}

마지막으로 " sorting_asc "클래스를 사용 하여 원하는 HTML 태그 / 요소에 CSS를 적용하십시오.

CSS에 내용을 포함시킬 필요가 없습니다. 배지 내용을 fa 요소 안에 넣은 다음 배지 CSS를 조정할 수 있습니다. http://jsfiddle.net/vmjwayrk/2/

<i class="fa fa-envelope fa-5x" style="position:relative;color:grey;">
  <span style="
        background-color: navy;
        border-radius: 50%;
        font-size: .25em;
        display:block;
        position:absolute;
        text-align: center;
        line-height: 2em;
        top: -.5em;
        right: -.5em;
        width: 2em;
        height: 2em;
        border:solid 4px #fff;
        box-shadow:0px 0px 1px #000;
        color: #fff;
    ">17</span>
</i>

또는 Sass를 사용하는 경우 FA 아이콘을 "확장"하여 표시 할 수 있습니다.

.mytextwithicon:before {
  @extend .fas, .fa-angle-double-right;

  @extend .mr-2; // using bootstrap to add a small gap
                 // between the icon and the text.
}

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

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

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

이를 위해 content속성 을 추가 하고font-family 필요한 경우 : before 또는 : after를 통해 속성을 필요한 요소 하면됩니다.

예를 들어 : 게시물 내의 모든 요소 뒤에 첨부 파일 아이콘을 첨부하고 a싶습니다. 따라서 먼저 해당 아이콘이 fontawesome에 있는지 검색해야합니다. 내가 여기서 찾은 것처럼 , 즉 fa fa-paperclip. 그런 다음 아이콘을 마우스 오른쪽 버튼으로 클릭하고 ::before의사 속성으로 이동하여 content사용 중인 태그 를 가져옵니다 \f0c6. 그런 다음 CSS에서 다음과 같이 사용합니다.

   .post a:after {
     font-family: FontAwesome,
     content: " \f0c6" /* I added a space before \ for better UI */
    }

명령 행을 통해 다음 Python 프로그램을 사용하여 Font-Awesome 아이콘에서 png 이미지를 작성하십시오.

https://github.com/Pythonity/font-awesome-to-png