CSS에서 글꼴 놀라운 아이콘 사용

CSS에서 글꼴 놀라운 아이콘 사용

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

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

이미지를 폰트 어썸의 아이콘으로 바꾸고 싶습니다.

나는 CSS의 아이콘을 배경 이미지로 사용할 방법이 없다고 생각합니다.폰트 어썸 스타일시트/글꼴이 내 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, Free Version의 경우 다음을 사용합니다.font-family: "Font Awesome 5 Free"
• FontAwesome v5, Pro 버전의 경우 다음을 사용합니다.font-family: "Font Awesome 5 Pro"

글꼴 무게 속성도 동일하게 설정해야 합니다(900으로 표시됨).

글꼴 이름을 찾는 또 다른 방법은 페이지에서 샘플 글꼴 멋진 아이콘을 마우스 오른쪽 버튼으로 클릭하여 글꼴 이름을 얻는 것입니다(utf-8 아이콘 코드를 찾을 수 있는 것과 동일한 방법이지만 다음에서 찾을 수 있음).:before).

사실 심지어font-awesomeCSS에는 아이콘 스타일을 설정하는 유사한 전략이 있습니다.당신이 빨리 연락하고 싶다면.icon 코드, 파일을 확인해봐요. 그리고 그들은 각각의 글꼴이 순수하게...

위의 모든 것을 통합하면, 다음은 잘 작동하는 최종 수업입니다.

   .faArrowIcon {
        position:relative;
    }

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

CSS를 사용하여 멋진 글꼴을 사용하려면 아래 단계를 따릅니다.

1단계 - CSS에 Awesome 글꼴 추가

/*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를 적용합니다.

이 예제 클래스를 사용해 볼 수 있습니다.아이콘 콘텐츠는 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";
    }

저는 파티에 조금 늦었습니다.그냥 다른 방법을 제안하고 싶습니다.

  button.calendar::before {
    content: '\f073';
    font-family: 'Font Awesome 5 Free';
    left: -4px;
    bottom: 4px;
    position: relative;
  }

position,left그리고.bottom아이콘을 정렬하는 데 사용됩니다.

추가할 때도 있습니다.font-weight: 600또는 그 이상도 도움이 됩니다.

콘텐츠를 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>

#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

또는 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.
}

폰타썸이 배경을 원하는 블록 밖으로 렌더링되기 때문에 주어진 답변은 실제 배경을 제공하지 않는 것 같습니다."실제" 배경 효과를 낼 수 있는 저의 솔루션은 다음과 같습니다.

html :

<div id="bloc" class="bg_ico_outer" style="">
    <i class="fa fa-bookmark-o bg_ico"></i>
    <div class='bloc_inner'>
        <h2>test fontawesome as background</h2>
    </div>
</div>

css :

.bg_ico {
    position: absolute;
    top: 0px;
    right: -10px;
    font-size: 17em;
    color: green;
    transform: rotate(25deg);
}

.bg_ico_outer{position: relative; overflow: hidden;}

#bloc{
    height: 200px;
    width:200px;
    background: blue;
    margin:50px auto;
}
.bloc_inner{
    position: absolute;
}
h2{color: white;}

는 이를위추만하됩니다면기하를 추가하기만 .content 및 속성font-family:before 또는 :before를 통해 필요한 요소에 대한 속성을 지정합니다.

예:나는 결국 첨부 아이콘을 첨부하고 싶었습니다.a내 게시물 안의 요소.그래서 먼저 폰타썸에 그런 아이콘이 있는지 검색해야 합니다.제가 여기서 발견한 경우처럼 말이죠.fa fa-paperclip그런 다음 아이콘을 마우스 오른쪽 단추로 클릭하고 다음으로 이동합니다.::before을 꺼내는 content그것이 사용하고 있는 태그, 나의 경우 내가 찾은 것은.\f0c6그러면 저는 그것을 제 CSS에 다음과 같이 사용할 것입니다.

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

이것이 가장 간단한 해결책인 것 같습니다 :-)

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

언급URL : https://stackoverflow.com/questions/14736496/use-font-awesome-icons-in-css