[css] 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>