글꼴 굉장한 6 : 전체 리뷰
Font Awesome은 확장 가능한 벡터 아이콘 모음입니다. 아이콘은 CSS 속성을 사용하여 포맷 할 수 있으며 색상, 크기, 그림자 등을 설정할 수 있습니다. 글꼴 버전 5.5.0에는 605 개의 아이콘이 포함되어 있습니다.
1 글꼴을 설치하는 방법
방법 1.
다음 코드를<head> 부분:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">글꼴이 연결되면 사이트의 아이콘을 사용할 수 있습니다.
방법 2.
font awesome 에서 글꼴을 다운로드하십시오. 아카이브를 풀고 아카이브에서 사이트 서버 (CSS 및 글꼴)로 두 개의 폴더를 업로드하십시오. 사이트에 해당 이름이있는 폴더가 이미있는 경우 다운로드 된 폴더에서 파일을 추가하면됩니다.
파일의 전체 또는 조정 된 버전을 사용할 수 있습니다.
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2 글꼴 멋진 아이콘을 사용하는 방법
아이콘은 두 가지 방법으로 웹 페이지에 추가 할 수 있습니다.<i> 그리고<span> elements, 또는by adding them to the desired element using the :before, :after pseudo-elements 그리고the appropriate value of the content property.
<i class="fa fa-home fa-fw"></i> li : {content : "\ f015";/ * 홈 아이콘 추가 */font-family : fontawesome; color : #aaaaaa; 마진-오른쪽 : 10px;}표준 아이콘 1 개
Font Awesome은 인라인 요소와 함께 사용하도록 설계되었습니다. 아이콘을 추가하려면 먼저 FA 클래스를<i> 또는<span> 요소.
요소 전후에 선택한 아이콘을 추가하려면 빈<i></i> 또는<span></span> 요소는 요소에 추가되며 아이콘 클래스와 스타일을 확장하는 추가 클래스가 할당됩니다.
<i class="fa fa-camera-retro"></i>2 개의 큰 아이콘
컨테이너에 대한 아이콘 크기를 늘리려면 FA-LG (33% 증가), FA-2X, FA-3X, FA-4X, FA-5X 클래스를 사용하십시오.
<i class="fa fa-camera-retro fa-lg"></i> <i class="fa fa-camera-retro fa-2x"></i> <i class="fa fa-camera- retro fa-3x"></i> <i class="fa fa-camera-retro fa-4x"></i> <i class="fa fa-camera-retro fa-5x"></i>3 고정 너비 아이콘
Use the fa-fw class to fix the width of the icon. This can be useful for designing navigation 또는lists on the site.
<ul> <li><a href="#"><i class="fa fa-home fa-fw"></i> 집</a></li> <li><a href="# "><i class="fa fa-book fa-fw"></i> 도서관</a></li> <li><a href="#"><i class="fa fa-pencil fa -fw"></i> 응용 프로그램</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> 설정</a ></li></ul>총알 목록에 대한 아이콘 4 개
FA-UL 및 FA-LI 클래스를 사용하여 기본 총알을<ul>…</ul> 총알 목록.
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>목록 항목</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>목록 항목</li> <li><i class="fa-li fa fa-square"></i>목록 항목</li></ul>5 개의 프레임 아이콘과 따옴표
Use the fa-border class to set the border for the icon. The pull-right 그리고pull-left classes will add quotes to the text.
<p><i class="fa fa-quote-left fa-3x pull-left fa-border"></i>Lorem ipsum dolor sit amet, consectetur hoodiscing elit. Donec Nec Purus congue, Posuere Libero, Porta Sapien. Sed Elit Lectus에서. SED LACUS ELIT, SEMPER VITAE FELIS ID, SODALES CONGUE SAPIEN.</p>6 개의 애니메이션 아이콘
FA-Spin, FA-Pulse, FA-Refresh, FA-COG 클래스를 추가하여 회전 아이콘을 설정하십시오. IE8 -IE9에서는 애니메이션이 지원되지 않습니다.
<i class="fa fa-spinner fa-spin"></i><i class="fa fa-circle-o-notch fa-spin"></i><i class="fa fa-refresh fa -spin"></i><i class="fa fa-cog fa-spin"></i><i class="fa fa-spinner fa-pulse"></i>7 변환 된 아이콘
아이콘을 회전 시키거나 뒤집으려면 FA- 로테이트* 및 fa-flip-* 클래스를 사용하십시오.
<i class="fa fa-shield"></i> <i class="fa fa-shield fa-rotate-90"></i> <i class="fa fa-shield fa-rotate-180" ></i><i class="fa fa-shield fa-rotate-270"></i> <i class="fa fa-shield fa-flip-horizontal"></i> <i class=" fa fa-shield fa-flip-vertical"></i>8 조합 아이콘
You can combine icons by overlaying one on top of the other. Use the fa-stack class for the parent icon, the fa-stack-1x class for the standard size, 그리고fa-stack-2x for the enlarged size.
<span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x" ></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-flag fa-stack-1x fa-inverse "></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-terminal fa-stack-1x fa-inverse "></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-camera fa-stack-1x"></i> <i class="fa fa-ban fa-stack-2x text-danger "></i></span>3 Font Awesome 4.5.0 collection, classes 그리고css code to insert using the content property
웹 응용 프로그램을위한 아이콘 fa -adjust- \ f042;FA- 랜더 - \ f13d;
fa -archive - \ f187;
fa -arrows- \ f047;
fa -esterisk- \ f069;
faat- \ f1fa;
fa-balance-scale- \ f24e;
fa -ban- \ f05e;
FA- 뱅크 - \ f19C;
FA -Barcode- \ f02a;
FA- 바터리-impty- \ f244;
fa-battery-half- \ f242;
fa-battery-Quarter- \ f243;
FA-Battery-Three-Quarters- \ f241;
FA- 바터리 -Full- \ f240;
fa -bed- \ f236;
fa -beer- \ f0fc;
fa -bell- \ f0f3;
fa-bell-slash-\ f1f6;
fa -binoculars- \ f1e5;
fa-birthday-cake- \ f1fd;
fa -bolt- \ f0e7;
fa- 폭탄 - \ f1e2;
fa -book- \ f02d;
아이콘을 회전 시키거나 뒤집으려면 FA- 로테이트* 및 fa-flip-* 클래스를 사용하십시오.
4 관련 리소스
글꼴 멋진 컬렉션 외에도 다른 아이콘 글꼴도 사용할 수 있습니다.
폰 텔로.Fontello 에는 다양한 아이콘 글꼴이 많이 있습니다. 좋아하는 아이콘을 선택하여 컴퓨터에 다운로드 할 수 있습니다.
기초 아이콘.Foundation Icon 는 Foundation Framework의 개발자의 또 다른 아이콘 글꼴 컬렉션입니다. 표준 아이콘 외에도 사이트에는 라운드 아이콘, 소셜 미디어 아이콘 등이 있습니다.
재료 아이콘.재료 아이콘은 인식의 용이성을 구현하는 Google의 통합 플랫 아이콘입니다. 아이콘은 모든 일반적인 플랫폼 및 모든 화면 해상도의 아름다운 디스플레이에 최적화됩니다.
아이콘 글꼴 컬렉션에는 750 개 이상의 아이콘이 포함되어 있습니다. 웹 사이트에 컬렉션을 설치하는 가장 쉬운 방법은 Google 웹 글꼴과 같은 아이콘을 사용하는 것입니다. 이렇게하려면 다음 코드가 페이지 마크 업에 포함되어 있습니다.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">브라우저에 글꼴을 올바르게 표시하려면 아이콘 글꼴을 사용하는 요소에 재료 ICONS 클래스가 제공됩니다.
.material-아이콘 {font-family : '재료 아이콘'; 글꼴 중량 : 일반 글꼴 스타일 : 정상 글꼴 크기 : 24px; / * 우선 아이콘 크기 */ 디스플레이 : 인라인 블록; 너비 : 1em; 높이 : 1em; 라인 높이 : 1; 텍스트 변환 : 없음; 문자 스페이스 : 정상 단어 랩 : 정상; 흰색 공간 : Nowrap; 방향 : ltr; -Webkit-Font-Smoothing : antialiased; / * 모든 WebKit 브라우저에서 지원되는 */ 텍스트 렌더링 : 최적화; / * 사파리 및 크롬지지 */ -Moz-OSX-Font-Smoothing : GrayScale; /* Firefox 지원. */ font-feature-settings : 'liga'; /* 즉, 지원. */}아이콘 자체는 다음을 사용하여 추가됩니다<I class=''material-아이콘''>아이콘의 합자 또는 HTML 코드</i> 예를 들어 태그 :
<i class="material-아이콘">계정 _balance_wallet</i><i class="material-아이콘"></i>합자는 모든 최신 브라우저 (즉, 버전 10부터 시작하여 이해됩니다. 아이콘 코드는 자동으로 생성됩니다.이를 위해 아이콘 이미지를 왼쪽 버튼으로 클릭하고 제안 된 모양을 복사해야합니다.
아이콘 크기
아이콘 크기 is controlled by additional classes:
.material-아이콘.md-18 {font-size : 18px;} /*<i class="material-아이콘 md-18"></i> */.material-아이콘.md-24 {font-size : 24px;} /*<i class="material-아이콘 md-24"></i> */.material-아이콘.md-36 {font-size : 36px;} /*<i class="material-아이콘 md-36"></i> */.material-아이콘.md-48 {font-size : 48px;} /*<i class="material-아이콘 md-48"></i> */아이콘 색상
아이콘의 색상은 추가 클래스를 사용하여 설정됩니다.
.material-아이콘.md-dark {color : rgba (0, 0, 0, 0.54);} /*<i class="material-아이콘 md-dark"></i> */.material-아이콘.md-light {color : rgba (255, 255, 255, 1);} /*<i class="material-아이콘 md-light"></i> */.material-아이콘.md-dark.md-inactive {color : rgba (0, 0, 0, 0.26);} /*<i class="material-아이콘 md-dark md-inactive"></i> * /.material-아이콘.md-light.md-inactive {color : rgba (255, 255, 255, 0.3);} /*<i class="material-아이콘 md-light md-inactive">얼굴</i> */사용자 정의 색상을 설정하려면 아이콘의 색상을 정의하는 클래스를 추가해야합니다.
.material-아이콘.indigo {색상 : #1A237E;} /*<i class="material-아이콘 indigo"></i> */자주 묻는 질문
- 단순한 용어로 FONT Awesome은 무엇입니까?
- 본질적으로, 그것은 가시성과 디자인을 향상시키기 위해 모든 웹 페이지 요소에 추가 할 수있는 아이콘이있는 글꼴입니다. 이 컬렉션은 모든 작업과 목적에 적합한 수백 개의 아이콘으로 구성됩니다.이 링크에 대한 자세한 정보
Michel Pinson은 여행 애호가이자 콘텐츠 제작자입니다. 교육과 탐험에 대한 열정을 합병 한 그는 지식을 공유하고 매력적인 교육 내용을 통해 다른 사람들에게 영감을주는 것에 대해 우려했습니다. 세계적인 전문 지식과 방황감을 가진 사람들에게 힘을 실어 주면서 세상을 더 가깝게 만듭니다.
