다음과 같은 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-face
CSS에서 FontAwesome에 대해 이미 선언 된 규칙 이 있다고 가정 ). 그런 다음 어떤 CSS 내용 값이 어떤 아이콘에 해당하는지 알아야합니다.
나는 여기에 모두 나열했습니다 : http://astronautweb.co/snippet/font-awesome/
답변
실제로 font-awesome
CSS 조차도 아이콘 스타일을 설정하는 비슷한 전략을 가지고 있습니다. 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>