영어 못하는 개발자

영어 못하는 개발자

외국어가 외계어 같이 느껴져서
문서를 한글로 번역하여 저장하는 블로그

FontAwesome 사용법

업데이트: Link

폰트어썸 사용 방법

기본 사용

스타일 접두사와 아이콘 이름을 사용하여 Font Awesome 아이콘을 어디에나 배치할 수 있습니다. 우리는 아이콘이 자연스럽게 문자와 나란히 나타나도록 하기 위해 노력했습니다.

Font Awesome은 인라인 요소와 함께 사용하도록 설계되었으며 프로젝트에서 참조 할 수 있도록 일관된 HTML 요소를 사용하는 것이 좋습니다. 우리는 간결성을 위해<i>태그를 좋아합니다. 대부분의 사람들은 요즘 강조 / 이탤릭체 의미론 텍스트에<em></em>을 사용하기 때문입니다. 그것이 취향이 아닌 경우,<span>을 사용하는 것이 더 의미론적으로 정확합니다.

아이콘을 참조하려면 두 가지 정보를 알아야합니다.

  1. 접두사fa- (자연스럽게 “font awesome”을 의미 함)!
  2. 사용하려는 스타일의 해당 접두사 **.
<i class="fas fa-camera"></i> <!-- this icon's 1) style prefix == fas and 2) icon name == camera -->
<i class="fas fa-camera"></i> <!-- using an <i> element to reference the icon -->
<span class="fas fa-camera"></span> <!-- using a <span> element to reference the icon -->
Style Availability Style Prefix Example Rendering
Solid Free fas <i class="fas fa-camera"></i>
Regular Pro Required far <i class="far fa-camera"></i>
Light Pro Required fal <i class="fal fa-camera"></i>
Duotone Pro Required fad <i class="fad fa-camera"></i>
Brands Free fab <i class="fab fa-font-awesome"></i>

fa 접두사는 버전 5에서 더 이상 사용되지 않습니다. 새로운 기본값은 브랜드에 대한fas 솔리드 스타일 및fab스타일입니다.

Font Awesome이 처음 구현되었고 CSS@ font-face 메소드를 사용하여 렌더링을 계속 지원하기 때문에 각 스타일은 특정 font-weight에 해당합니다.

Style Availability @font-face weight
Solid Free Plan 900
Regular Pro Plan Required 400
Light Pro Plan Required 300
Duotone Pro Plan Required 900
Brands Free Plan 400

font-weight 값이 필요한 이유는?
<i>또는 다른 HTML 요소를 사용하는 것이 가장 인기 있고 아이콘을 렌더링하는 쉬운 방법이지만, 우리는 사용자 정의로 작성된 CSS pseudo-elements 글꼴 가중치는 해당 기술과 함께 사용되며 아이콘 스타일을 설정하는 방법입니다.

웹의 Font Awesome에서 Ligature 사용
데스크톱 워크 플로는 Ligature를 활용하여 좋아하는 디자인 및 프레젠테이션 앱에 아이콘을 쉽게 삽입 할 수 있습니다. SVG JS 프레임 워크뿐만 아니라 Ligature 조회 테이블이 추가 파일 공간을 차지하여 성능 문제를 일으킬 수 있습니다. 아이콘을 하위 설정하는 옵션과 솔루션이 제공 될 때까지 웹 글꼴 CSS의 Ligature를 고려하는 것이 어렵습니다.

Font Awesome 아이콘 + 당신의 프로젝트 스타일링
Font Awesome 아이콘은 CSS 크기와 색상을 자동으로 상속합니다 (아래 예 참조). 즉, 텍스트를 넣을 때마다 텍스트가 인라인으로 혼합됩니다. 폰트 어썸 (Font Awesome)은 너무 의견이 많지 않으며, 상황에 맞게 올바르게 렌더링하는 데 필요한 기본 스타일 규칙 아이콘 만 설정합니다.

<span style="font-size: 3em; color: Tomato;">
  <i class="fas fa-camera"></i>
</span>

<span style="font-size: 48px; color: Dodgerblue;">
  <i class="fas fa-camera"></i>
</span>

<span style="font-size: 3rem;">
  <span style="color: Mediumslateblue;">
  <i class="fas fa-camera"></i>
  </span>
</span>

프로젝트 코드에 고유 한 CSS 규칙을 추가하여 사용자 정의 스타일을 Font Awesome 아이콘에 추가 할 수도 있습니다. 다음은 간단한 예입니다.

adding-custom-styles.html

<head>
  <!-- reference your copy Font Awesome here (from our CDN or by hosting yourself) -->
  <link href="/your-path-to-fontawesome/css/fontawesome.css" rel="stylesheet"/>
  <link href="/your-path-to-fontawesome/css/brands.css" rel="stylesheet"/>
  <link href="/your-path-to-fontawesome/css/solid.css" rel="stylesheet"/>

  <style type="css">
  <!-- custom styling for all icons -->
  i.fas,
  i.fab {
    border: 1px solid red;
  }

  <!-- custom styling for specific icons -->
  .fa-fish {
    color: salmon;
  }

  .fa-frog {
    color: green;
  }

  .fa-user-ninja.vanished {
    opacity: 0.0;
  }

  .fa-facebook {
    color: rgb(59, 91, 152);
  }
  </style>
</head>
<body>
  <i class="fas fa-fish"></i>
  <i class="fas fa-frog"></i>
  <i class="fas fa-user-ninja vanished"></i>
  <i class="fab fa-facebook"></i>
</body>

사용자 정의 CSS 와 Font-Awesome SVG + JS framework 작성
SVG 프레임 워크를 사용할 때 Font Awesome 기반<i>DOM 요소는 기본적으로 새로운<svg>요소로 대체됩니다. CSS 규칙이 올바른 요소를 대상으로해야합니다.

아이콘 치트시트

이제 모든 설정을 완료했으며 참조 아이콘 온라인 설명서를 사용하면 몇 명의 도우미가있는 아이콘을 쉽게 찾고 삽입 할 수 있습니다.

아이콘 검색에 내장된 기능

아이콘 갤러리 및 검색 목록에서 나열된 각 아이콘에 대한 추가 정보를 빠르게 켜거나 끌 수있는 빠른 방법을 제공했습니다. 추가 정보에는 각 아이콘의 이름, 유니 코드 문자 값 및 아이콘을 글리프로 복사하는 컨트롤이 포함됩니다.

Toggle that 'Show Cheatsheet' button on Font Awesome's icon listing views

Font Awesome의 아이콘 목록보기에서 ‘치트시트 표시’버튼을 전환하십시오.

Once toggled on, you'll see extra information about each icon.

설정하면 각 아이콘에 대한 추가 정보가 표시됩니다.

치트시트 자체

버전 4부터는 아이콘 갤러리 / 검색보기의 모든 정보가 포함 된 전용 치트시트 보기도 있습니다. 이 치트 시트는 인쇄 설정을 통해 PDF로 저장하여 오프라인 상태이거나 팀과 아이콘 목록을 공유 할 때 쉽게 찾을 수 있습니다.

The cheat sheet contains rows of information for all icons. And there's a free and pro version to use and share

치트 시트에는 모든 아이콘에 대한 정보 행이 포함되어 있습니다. 사용하고 공유 할 수있는 무료 및 프로 버전이 있습니다.

Each icon has its name, rendering (which doubles as a copyable glyph), and Unicode value

각 아이콘의 이름, 렌더링 (복사 가능한 글리프로 두 배) 및 유니 코드 값이 있습니다.

이 아이콘 정보는 언제 어떻게 사용합니까?

이러한 도우미는 웹 및 데스크톱 워크 플로에 모두 사용할 수 있습니다. 다음은 각 정보가 유익한 것에 대한 요약입니다.

Icon Information What it’s good for
Name 아이콘 참조 (예 :<i class = "fas fa- [NAME] "> </ i>) 또는 데스크톱에서 ligatures를 사용할 때
Unicode CSS pseudo-elements를 사용하여 아이콘 렌더링
Glyph 바탕 화면의 텍스트 레이어에 복사하여 붙여 넣기 또는 웹의 아이콘 (예 :<i class = "fas"> [GLYPH] </ i>)

아이콘 크기조정

당사의 웹 글꼴 CSS 및 SVG JS 프레임 워크에는 페이지 UI 컨텍스트에서 아이콘 크기를 조정하기위한 몇 가지 기본 컨트롤이 포함되어 있습니다.

연결된 크기

아이콘은 부모 컨테이너의font-size를 상속하여 사용 가능한 모든 텍스트와 일치시킵니다. 다음 클래스를 사용하면 상속 된font-size를 기준으로 아이콘 크기를 늘리거나 줄일 수 있습니다.

<div>
  <i class="fas fa-camera fa-xs"></i>
  <i class="fas fa-camera fa-sm"></i>
  <i class="fas fa-camera fa-lg"></i>
  <i class="fas fa-camera fa-2x"></i>
  <i class="fas fa-camera fa-3x"></i>
  <i class="fas fa-camera fa-5x"></i>
  <i class="fas fa-camera fa-7x"></i>
  <i class="fas fa-camera fa-10x"></i>
</div>

다음은 상대 배율을 볼 수있는 몇 가지 예입니다.

<div style="font-size: 0.5rem;">
  <i class="fas fa-camera fa-xs"></i>
  <i class="fas fa-camera fa-sm"></i>
  <i class="fas fa-camera fa-lg"></i>
  <i class="fas fa-camera fa-2x"></i>
  <i class="fas fa-camera fa-3x"></i>
  <i class="fas fa-camera fa-5x"></i>
  <i class="fas fa-camera fa-7x"></i>
  <i class="fas fa-camera fa-10x"></i>
</div>

고정 너비 아이콘

목록이나 탐색 메뉴와 같이 일련의 아이콘을 세로로 정렬해야합니까? 이러한 경우에만 고정 너비 지원 스타일을 포함 시켰습니다.

아이콘을 참조하는 HTML 요소에fa-fw 클래스를 추가하여 하나 이상의 아이콘을 동일한 고정 너비로 설정하십시오. 다양한 아이콘 너비 (예 : 넓지 만 짧은 아이콘 위에있는 키가 크거나 마른 아이콘)가 세로 정렬을 해제 할 때 사용하면 좋습니다. 다음 예제에서는 명확하게하기 위해 아이콘에 배경색을 추가하여 고정 너비를 볼 수 있고 부모 요소의 글꼴 크기를 늘 렸습니다.

Skating
Skiing
Nordic Skiing
Snowboarding
Snowplow
<div style="font-size: 2rem;">
  <div><i class="fas fa-skating fa-fw" style="background:DodgerBlue"></i> Skating</div>
  <div><i class="fas fa-skiing fa-fw" style="background:SkyBlue"></i> Skiing</div>
  <div><i class="fas fa-skiing-nordic fa-fw" style="background:DodgerBlue"></i> Nordic Skiing</div>
  <div><i class="fas fa-snowboarding fa-fw" style="background:SkyBlue"></i> Snowboarding</div>
  <div><i class="fas fa-snowplow fa-fw" style="background:DodgerBlue"></i> Snowplow</div>
</div>

List에서의 아이콘

고정된 너비 스타일링에서 수직 정렬을 사용하여 유틸리티 스타일을 추가했습니다. 장식 글 머리 기호로 사용되는 아이콘으로 HTML 목록을 처리합니다.

순서없는 목록에서 기본 글 머리 기호를 바꾸려면fa-ul 및 fa-li를 사용하십시오.

UL

  • List icons can
  • be used to
  • replace bullets
  • in lists
<ul class="fa-ul">
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li>
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
  <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
  <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
</ul>

OL

  1. List icons can
  2. be used to
  3. replace bullets
  4. in lists
<ol class="fa-ul">
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li>
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
  <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
  <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
</ol>

아이콘 회전

때로는 프로젝트 나 디자인에서 아이콘을 작동 시키려면 아이콘을 회전, 뒤집기 또는 대칭시켜야합니다. 이를 돕기 위해 몇 가지 빠른 유틸리티가 포함되었습니다.

아이콘을 임의로 회전하고 뒤집으려면 아이콘을 참조 할 때 fa-rotate- * 및 fa-flip- * 클래스를 사용하십시오.

<div class="fa-4x">
  <i class="fas fa-snowboarding"></i>
  <i class="fas fa-snowboarding fa-rotate-90"></i>
  <i class="fas fa-snowboarding fa-rotate-180"></i>
  <i class="fas fa-snowboarding fa-rotate-270"></i>
  <i class="fas fa-snowboarding fa-flip-horizontal"></i>
  <i class="fas fa-snowboarding fa-flip-vertical"></i>
  <i class="fas fa-snowboarding fa-flip-both"></i>
</div>

회전 Classes

Class 회전 정도
fa-rotate-90 90°
fa-rotate-180 180°
fa-rotate-270 270°
fa-flip-horizontal 수평으로 아이콘 반전
fa-flip-vertical 아이콘을 수직으로 반전
fa-flip-both 아이콘을 수평 수직 모두 반전 (5.7.0 이상 필요)

회전 할 때 더 많은 제어가 필요한가요?

SVG JS 프레임 워크에는 아이콘을보다 세부적으로 회전 할 수있는 파워 변환 기능이 포함되어 있습니다. 심지어 어느 정도까지! 그런 식으로 Font Awesome을 사용하고 있다면 확인하십시오.

움직이는 아이콘

회전하는 로딩 또는 상태 통신 아이콘이 필요하십니까? 당신은 바로 이곳에 왔습니다. 지원 스타일에 기본 애니메이션 몇 가지를 포함 시켰습니다.

fa-spin 클래스를 사용하여 아이콘을 회전시키고fa-pulse를 사용하여 8 단계로 회전 시키십시오. 이것은fa-spinner 및 spinner icons category의 모든 항목에서 특히 잘 작동합니다.

<div class="fa-3x">
  <i class="fas fa-spinner fa-spin"></i>
  <i class="fas fa-circle-notch fa-spin"></i>
  <i class="fas fa-sync fa-spin"></i>
  <i class="fas fa-cog fa-spin"></i>
  <i class="fas fa-spinner fa-pulse"></i>
  <i class="fas fa-stroopwafel fa-spin"></i>
</div>

Icon Animation + Wobbles

우리는 아이콘이 회전하거나 진동 할 때 아이콘의 중심을 완벽하게 유지하기 위해 노력했습니다. 그러나 ** 여러 브라우저와 웹 글꼴 CSS 버전의 Font Awesome 관련 문제가 있습니다 **. 많은 조사를 통해 이것은 일반적으로 웹 글꼴에 문제가있는 것으로 보이며 직접 해결할 수는 없습니다. 이 문제를 해결할 수있는 몇 가지 방법이 있습니다.

  • Frameworks 바꾸기 - SVG with JavaScript 버전 바꾸기, 이를 위해 훨씬 더 잘 작동합니다.
  • 애니메이션 아이콘 표시 설정 - 가능하면display : block;을 사용하십시오. 이것은이 문제에 많은 도움이되는 것 같습니다.

테두리 + 밀려진 아이콘

경우에 따라 아이콘 주위에 텍스트를 감싸거나 테두리를 사용하여 시각적으로 구분할 수 있습니다. 지원 스타일링에 포함 된 방법은 다음과 같습니다.

인용 부호 나 기사 아이콘을 쉽게 보려면fa-border 및fa-pull-right 또는fa-pull-left를 사용하십시오.

Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further... And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past. 
<i class="fas fa-quote-left fa-2x fa-pull-left"></i>
Gatsby believed in the green light, the orgastic future that year by year recedes before us.
It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further...
And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.

보다 시각적으로 분리하려면 아이콘 유형과 함께 ‘fa-border’를 사용하십시오.

Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further... And one fine morning — So we beat on, boats against the current, borne back ceaselessly into th 
<i class="fas fa-arrow-right fa-2x fa-pull-right fa-border"></i>
Gatsby believed in the green light, the orgastic future that year by year recedes before us.
It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further...
And one fine morning — So we beat on, boats against the current, borne back ceaselessly into th

누적 된 아이콘

Font Awesome과 함께 제공되는 지원 스타일을 사용하여 아이콘을 쉽게 쌓을 수 있습니다.

여러 아이콘을 쌓으려면 스택하려는 두 아이콘의 부모 HTML 요소에서fa-stack 클래스를 사용하십시오. 그런 다음 규칙적인 크기의 아이콘으로fa-stack-1x 클래스를 추가하고 더 큰 아이콘으로fa-stack-2x 클래스를 추가하십시오. fa-inverse를fa-stack-1x로 아이콘에 추가하여 녹아웃 효과를 얻을 수 있습니다. 부모에게 더 큰 아이콘 클래스를 던져 크기 조정을 더 제어 할 수도 있습니다.

<span class="fa-stack fa-2x">
  <i class="fas fa-square fa-stack-2x"></i>
  <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fas fa-flag fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
  <i class="fas fa-square fa-stack-2x"></i>
  <i class="fas fa-terminal fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-4x">
  <i class="fas fa-square fa-stack-2x"></i>
  <i class="fas fa-terminal fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
  <i class="fas fa-camera fa-stack-1x"></i>
  <i class="fas fa-ban fa-stack-2x" style="color:Tomato"></i>
</span>

누적 및 일반 아이콘 정렬

단일 아이콘과 함께 누적 아이콘을 사용할 수 있습니다. 누적 아이콘은 프레임 워크에 포함 된 CSS에 의해 단일 아이콘 크기의 두 배 크기로 스타일이 지정되므로 누적 아이콘의 크기를 줄이거 나 단일 아이콘의 크기를 조정해야합니다.

<i class="far fa-circle fa-2x"></i>
<span class="fa-stack" style="vertical-align: top;">
  <i class="far fa-circle fa-stack-2x"></i>
  <i class="fas fa-flag fa-stack-1x"></i>
</span>
<span class="fa-stack" style="vertical-align: top;">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fas fa-flag fa-stack-1x fa-inverse"></i>
</span>
<i class="far fa-circle fa-2x"></i>

일부 사용자 정의 CSS 필요 레이아웃 필요에 따라 스택 아이콘의 기본 ‘글꼴 크기’를 변경하는 경우 고유 한 사용자 지정 규칙을 작성해야합니다. (기본적으로 스택 아이콘은display : inline-block; 및 vertical-align:middle;로 설정 됨).

<style>
  .fa-stack { font-size: 0.5em; }
  i { vertical-align: middle; }
</style>

<i class="far fa-circle"></i>
<span class="fa-stack">
  <i class="far fa-circle fa-stack-2x"></i>
  <i class="fas fa-flag fa-stack-1x"></i>
</span>
<span class="fa-stack">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fas fa-flag fa-stack-1x fa-inverse"></i>
</span>
<i class="far fa-circle"></i>

적재하는 동안 더 강력한 것이 필요하십니까?

SVG JS 프레임 워크에는 mask 및 layer 아이콘을 더 세밀하게 회전 할 수 있습니다. 그런식으로 Font Awesome을 사용하고 있다면 확인하십시오.

강력한 바꾸기 NEW!

Heads Up!
이 기능을 사용하려면 SVG JS 버전의 Font Awesome을 사용해야합니다.

Font Awesome 5의 SVG 기능 덕분에 이제 data-fa-transform 요소 속성을 사용하여 아이콘의 크기를 조절하고 위치를 지정하고 뒤집거나 회전 할 수 있습니다. 매우 유용한 효과를 위해 이들을 결합 할 수도 있습니다.

크기 바꾸기

Power Transform 스케일링은 컨테이너를 변경하거나 이동하지 않고 아이콘 크기에 영향을줍니다. 아이콘을 확대 또는 축소하려면grow- #및shrink- #을 소수를 포함한 임의의 값과 함께 사용하십시오. 단위는 1 / 16em입니다. 예를 명확히하기 위해 아이콘에 배경색을 추가하여 효과를 볼 수 있습니다.

<div class="fa-4x">
  <i class="fas fa-seedling" data-fa-transform="shrink-8" style="background:MistyRose"></i>
  <i class="fas fa-seedling" style="background:MistyRose"></i>
  <i class="fas fa-seedling" data-fa-transform="grow-6" style="background:MistyRose"></i>
</div>

위치 바꾸기

Power Transform 위치 지정은 컨테이너를 변경하거나 이동하지 않고도 아이콘 위치에 영향을줍니다. 아이콘을 위, 아래, 왼쪽 또는 오른쪽으로 이동하려면up- #,down- #,left- #및right- #을 소수를 포함한 임의의 값과 함께 사용하십시오. 단위는 1/16em입니다. 예를 명확히하기 위해 아이콘에 배경색을 추가하여 효과를 볼 수 있습니다.

<div class="fa-4x">
  <i class="fas fa-seedling" data-fa-transform="shrink-8" style="background:MistyRose"></i>
  <i class="fas fa-seedling" data-fa-transform="shrink-8 up-6" style="background:MistyRose"></i>
  <i class="fas fa-seedling" data-fa-transform="shrink-8 right-6" style="background:MistyRose"></i>
  <i class="fas fa-seedling" data-fa-transform="shrink-8 down-6" style="background:MistyRose"></i>
  <i class="fas fa-seedling" data-fa-transform="shrink-8 left-6" style="background:MistyRose"></i>
</div>

회전 & 반전

Power Transform 회전 및 뒤집기는 컨테이너를 변경하거나 이동하지 않고도 아이콘 각도와 반사에 영향을줍니다. 아이콘을 회전하거나 뒤집으려면rotate- #,flip-v 및flip-h를 임의의 값과 함께 사용하십시오. 단위는 음수가 허용되는 각도입니다 (예제에서 다섯 번째 아이콘 참조). 예를 명확히하기 위해 아이콘에 배경색을 추가하여 효과를 볼 수 있습니다.

<div class="fa-4x">
  <i class="fas fa-seedling" data-fa-transform="rotate-90" style="background:MistyRose"></i>
  <i class="fas fa-seedling" data-fa-transform="rotate-180" style="background:MistyRose"></i>
  <i class="fas fa-seedling" data-fa-transform="rotate-270" style="background:MistyRose"></i>
  <i class="fas fa-seedling" data-fa-transform="rotate-30" style="background:MistyRose"></i>
  <i class="fas fa-seedling" data-fa-transform="rotate--30" style="background:MistyRose"></i>
  <i class="fas fa-seedling" data-fa-transform="flip-v" style="background:MistyRose"></i>
  <i class="fas fa-seedling" data-fa-transform="flip-h" style="background:MistyRose"></i>
  <i class="fas fa-seedling" data-fa-transform="flip-v flip-h" style="background:MistyRose"></i>
</div>

알고 있나요?

위에서 언급 한 모든 power transforms를 하나의 아이콘으로 혼합하여 일치시킬 수 있습니다.

마스킹 NEW!

Heads Up!
이 기능을 사용하려면 SVG JS 버전의 Font Awesome을 사용해야합니다.

Font Awesome 5의 SVG 기능 덕분에 두 아이콘을 결합하여 하나의 단색 모양을 만들 수 있습니다! 정말 멋진 효과를 위해 새로운 Power Transforms와 함께 사용하십시오.

마스크는 배경 색상을 원할 때 좋습니다. 예를 명확히하기 위해 아이콘에 배경색을 추가하여 효과를 볼 수 있습니다.

<div class="fa-4x">
  <i class="fas fa-pencil-alt" data-fa-transform="shrink-10 up-.5" data-fa-mask="fas fa-comment" style="background:MistyRose"></i>
  <i class="fab fa-facebook-f" data-fa-transform="shrink-3.5 down-1.6 right-1.25" data-fa-mask="fas fa-circle" style="background:MistyRose"></i>
  <i class="fas fa-headphones" data-fa-transform="shrink-6" data-fa-mask="fas fa-square" style="background:MistyRose"></i>
  <i class="fas fa-mask" data-fa-transform="shrink-3 up-1" data-fa-mask="fas fa-circle" style="background:MistyRose"></i>
</div>
마스킹 구성 요소 작동 원리
내부 아이콘 (잘라 내기) 전형적인class 속성을 사용하여 설정하십시오. data-fa-transform 속성을 사용하여 변환하십시오.
외부 아이콘 내부 아이콘에서 data-fa-mask속성을 사용하여 설정하십시오.

레이어링, 텍스트 및 카운터 NEW!

Heads Up!
이 기능을 사용하려면 SVG JS 버전의 Font Awesome을 사용해야합니다.

레이어는 아이콘과 텍스트를 서로 시각적으로 배치하여 클래식 아이콘 스택을 대체하는 새로운 방법입니다. 이 새로운 접근 방식으로 두 개 이상의 아이콘을 사용할 수 있습니다. 유스!

레이어는 페이지의 배경을 표시하지 않으려는 경우 또는 여러 색상을 사용하거나, 여러 아이콘을 레이어하거나, 텍스트를 레이어하거나, 카운터를 아이콘에 표시하려는 경우에 좋습니다. 예제에서 명확하게하기 위해 레이어에 배경색을 추가하여 효과를 확인할 수 있습니다.

27 NEW 1,419 
<div class="fa-4x">
  <span class="fa-layers fa-fw" style="background:MistyRose">
    <i class="fas fa-circle" style="color:Tomato"></i>
    <i class="fa-inverse fas fa-times" data-fa-transform="shrink-6"></i>
  </span>

  <span class="fa-layers fa-fw" style="background:MistyRose">
    <i class="fas fa-bookmark"></i>
    <i class="fa-inverse fas fa-heart" data-fa-transform="shrink-10 up-2" style="color:Tomato"></i>
  </span>

  <span class="fa-layers fa-fw" style="background:MistyRose">
    <i class="fas fa-play" data-fa-transform="rotate--90 grow-2"></i>
    <i class="fas fa-sun fa-inverse" data-fa-transform="shrink-10 up-2"></i>
    <i class="fas fa-moon fa-inverse" data-fa-transform="shrink-11 down-4.2 left-4"></i>
    <i class="fas fa-star fa-inverse" data-fa-transform="shrink-11 down-4.2 right-4"></i>
  </span>

  <span class="fa-layers fa-fw" style="background:MistyRose">
    <i class="fas fa-calendar"></i>
    <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-8 down-3" style="font-weight:900">27</span>
  </span>

  <span class="fa-layers fa-fw" style="background:MistyRose">
    <i class="fas fa-certificate"></i>
    <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-11.5 rotate--30" style="font-weight:900">NEW</span>
  </span>

  <span class="fa-layers fa-fw" style="background:MistyRose">
    <i class="fas fa-envelope"></i>
    <span class="fa-layers-counter" style="background:Tomato">1,419</span>
  </span>
</div>
레이어링 구성요소 작동 원리
fa-layers 아이콘 또는 텍스트 스택을 감 쌉니다. 레이어가 정렬되도록 'fa-fw'클래스도 포함하고 싶을 것입니다.
내부 아이콘 fa-layers 요소 안에 원하는만큼 아이콘을 추가하십시오. 아이콘은 맨 위에 마지막 아이콘이 표시됩니다.
fa-layers-text fa-layers 요소 내부에 아이콘 위에 텍스트를 추가하십시오.
완전한 제어를 위해 data-fa-transform과 결합하십시오.
fa-layers-counter 아이콘 오른쪽 위에 카운터를 추가합니다.
fa-layers-bottom-left, fa-layers-bottom-right, fa-layers-top-left-left 및 기본 fa-layers-top-right로 위치 할 수 있습니다.
오버플로 텍스트는 줄임표로 잘립니다.

이중 톤 아이콘 NEW!

시작하기 전에 다음을 검토하고 다음 사항을 확인하십시오.

이중 톤 스타일 다른 모든 아이콘과 동일하게 작동. 또한 Font Awesome의 모든 아이콘 버전이 두 가지 다른 색조로 제공됩니다. 프로젝트의 아이콘에 더 많은 브랜드 또는 설명적인 품질을 추가하는 데 좋습니다.

기본 사용

이중 톤 아이콘은 동일한 구문 Font Awesome 아이콘을 사용하며 특정 스타일 접두사 (fad)를 사용하여 다른 아이콘과 같이 참조 할 수 있습니다.

<div class="fa-3x">
  <i class="fad fa-camera"></i> <!-- a duotone style camera icon -->
  <i class="fad fa-fire-alt"></i> <!-- a duotone style fire-alt icon -->
  <i class="fad fa-bus-alt"></i> <!-- a duotone style bus-alt icon -->
  <i class="fad fa-fill-drip"></i> <!-- a duotone style fill-drip icon -->
</div>

스와핑 레이어 불투명도

각 듀오톤 아이콘의 레이어의 기본 불투명도를 스왑할 수 있습니다. 그러면 아이콘의 1차 계층이 2차 계층이 아닌 40%의 기본 불투명도를 갖게 됩니다.

<div class="fa-3x">
  <i class="fad fa-camera"></i> <!-- a duotone style camera icon -->
  <i class="fad fa-camera fa-swap-opacity"></i> <!-- a duotone style camera icon with swapped opacity -->

  <i class="fad fa-fire-alt"></i> <!-- a duotone style fire-alt icon -->
  <i class="fad fa-fire-alt fa-swap-opacity"></i> <!-- a duotone style fire-alt icon with swapped opacity -->

  <i class="fad fa-bus-alt"></i> <!-- a duotone style bus-alt icon -->
  <i class="fad fa-bus-alt fa-swap-opacity"></i> <!-- a duotone style bus-alt icon with swapped opacity -->
</div>

Your Turn!
이 Codepen 불투명도-교환 예제와 함께 떨어질 때까지 스왑.

불투명도 변경

기본적으로 듀오톤 아이콘의 2차 레이어는 40% 불투명도로 설정됩니다(Font Awesome의 지원 CSS의 규칙을 통해 opacity: 0.4;). You can explicitly set the opacity of a duotone icon’s layer by using the CSS custom properties below. New to custom properties? Here are some places to set them.

Properties CSS Custom Property Accepted Values
Set Primary Layer Opacity --fa-primary-opacity 0 1.0
Set Secondary Layer Opacity --fa-secondary-opacity 0 1.0 
<div class="fa-3x">
  <i class="fad fa-bus-alt" style="--fa-secondary-opacity: 0.20"></i> <!--  secondary layer's opacity set to 20% -->
  <i class="fad fa-bus-alt" style="--fa-secondary-opacity: 0.40"></i> <!--  secondary layer's opacity set to 40% -->
  <i class="fad fa-bus-alt" style="--fa-secondary-opacity: 0.60"></i> <!--  secondary layer's opacity set to 60% -->
  <i class="fad fa-bus-alt" style="--fa-secondary-opacity: 0.80"></i> <!--  secondary layer's opacity set to 80% -->
  <i class="fad fa-bus-alt" style="--fa-secondary-opacity: 1.0"></i> <!--  secondary layer's opacity set to 100% -->
</div>

<div class="fa-3x">
  <i class="fad fa-bus-alt" style="--fa-primary-opacity: 0.20"></i> <!--  primary layer's opacity set to 20% -->
  <i class="fad fa-bus-alt" style="--fa-primary-opacity: 0.40"></i> <!--  primary layer's opacity set to 40% -->
  <i class="fad fa-bus-alt" style="--fa-primary-opacity: 0.60"></i> <!--  primary layer's opacity set to 60% -->
  <i class="fad fa-bus-alt" style="--fa-primary-opacity: 0.80"></i> <!--  primary layer's opacity set to 80% -->
  <i class="fad fa-bus-alt" style="--fa-primary-opacity: 1.0"></i> <!--  primary layer's opacity set to 100% -->
</div>

Your Turn!
이 개념이“투명”한지 확인하십시오. 서로 다른 불투명도 예제에 도전해보십시오.

이중 톤 아이콘 색칠

다른 모든 Font Awesome 아이콘과 마찬가지로 듀오톤 아이콘 CSS 크기와 색상을 자동으로 상속합니다. 듀오톤 아이콘은 기본 및 보조 계층으로 구성됩니다. 기본적으로 2차 레이어는 아이콘의 상속되거나 직접 설정된 색상의 밝은 색조로 나타나도록 40%의 불투명도가 부여됩니다.

CSS 사용자 지정 속성을 사용하여 듀오톤 아이콘의 기본 및 보조 레이어에 몇 가지 색상 후크를 추가했습니다. 사용자 지정 속성이 새로 나왔습니까? 여기 몇 가지 설치 장소가 있습니다.

Properties CSS Custom Property Accepted Values
기본 레이어 색상 설정 --fa-primary-color 유효한 CSS colorvalue
보조 레이어 색상 설정 --fa-secondary-color 유효한 CSS colorvalue 
<div class="fa-3x">
  <i class="fad fa-bus-alt" style="--fa-primary-color: gold;"></i>  <!-- primary layer color defined -->
  <i class="fad fa-bus-alt" style="--fa-primary-color: orangered;"></i> <!-- primary layer color defined -->
  <i class="fad fa-fill-drip" style="--fa-secondary-color: limegreen;"></i>  <!-- secondary layer color defined -->
  <i class="fad fa-fill-drip" style="--fa-secondary-color: rebeccapurple;"></i> <!-- secondary layer color defined -->
  <i class="fad fa-battery-full" style="--fa-primary-color: limegreen; --fa-secondary-color: dimgray;"></i> <!-- secondary + primary layer color defined -->
  <i class="fad fa-battery-quarter" style="--fa-primary-color: orange; --fa-secondary-color: dimgray;"></i> <!-- secondary + primary layer color defined -->
</div>

Your Turn!
다음은 크레이-크레이 (ola)와 함께 갈 수있는 색칠 예가있는 코드 펜입니다.

고급 사용

모든 채색, 불투명도 및 기타 옵션을 함께 사용하면 Font Awesome 아이콘이 훨씬 더 훌륭해집니다. 이중 톤 아이콘이 프로젝트를 다음 단계로 끌어 올리는 방법에 대한 몇 가지 아이디어가 있습니다.

색상을 사용하여 아이콘의 일부 또는 강조 표시

<div class="fa-3x">
  <i class="fad fa-book" style="--fa-primary-color: lightseagreen; --fa-secondary-color: linen; --fa-secondary-opacity: 1.0;"></i>
  <i class="fad fa-book-spells" style="--fa-primary-color: mediumpurple; --fa-secondary-color: linen; --fa-secondary-opacity: 1.0;"></i>
  <i class="fad fa-book-medical" style="--fa-primary-color: crimson; --fa-secondary-color: linen; --fa-secondary-opacity: 1.0;"></i>
  <i class="fad fa-book-user" style="--fa-primary-color: peru; --fa-secondary-color: linen; --fa-secondary-opacity: 1.0;"></i>

  <i class="fad fa-toggle-off" style="--fa-primary-color: white; --fa-secondary-color: gray; --fa-secondary-opacity: 1.0;"></i>
  <i class="fad fa-toggle-on" style="--fa-primary-color: dodgerblue; --fa-secondary-color: white; --fa-secondary-opacity: 1.0;"></i>

  <i class="fad fa-file-plus" style="--fa-primary-color: white; --fa-secondary-color: limegreen; --fa-secondary-opacity: 1.0;"></i>
  <i class="fad fa-file-exclamation" style="--fa-primary-color: white; --fa-secondary-color: gold; --fa-secondary-opacity: 1.0;"></i>
  <i class="fad fa-file-times" style="--fa-primary-color: white; --fa-secondary-color: tomato; --fa-secondary-opacity: 1.0;"></i>
</div>

그림처럼 보이는 풀 컬러 아이콘 만들기

<div class="fa-3x">
  <i class="fad fa-crow" style="--fa-secondary-opacity: 1.0; --fa-primary-color: dodgerblue; --fa-secondary-color: gold;"></i>
  <i class="fad fa-campfire" style="--fa-secondary-opacity: 1.0; --fa-primary-color: sienna; --fa-secondary-color: red;"></i>
  <i class="fad fa-birthday-cake" style="--fa-secondary-opacity: 1.0; --fa-primary-color: pink; --fa-secondary-color: palevioletred;"></i>
  <i class="fad fa-ear" style="--fa-secondary-opacity: 1.0; --fa-primary-color: sandybrown; --fa-secondary-color: bisque;"></i>
  <i class="fad fa-corn" style="--fa-secondary-opacity: 1.0; --fa-primary-color: mediumseagreen; --fa-secondary-color: gold;"></i>
  <i class="fad fa-cookie-bite" style="--fa-secondary-opacity: 1.0; --fa-primary-color: saddlebrown; --fa-secondary-color: burlywood;"></i>
</div>

브랜드 색상으로 테마 아이콘

<style>
  .theme-ravenclaw {
    --fa-secondary-opacity: 1.0;
    --fa-primary-color: rgb(4, 56, 161);
    --fa-secondary-color: rgb(108, 108, 108);
  }
</style>

<div class="fa-3x">
  <i class="fad fa-hat-wizard theme-ravenclaw"></i>
  <i class="fad fa-flask-potion theme-ravenclaw"></i>
  <i class="fad fa-wand-magic theme-ravenclaw"></i>
  <i class="fad fa-scarf theme-ravenclaw"></i>
  <i class="fad fa-book-spells theme-ravenclaw"></i>
</div>

Your Turn!
“암흑 예술에 대한 고급 방어”및 이중 톤 아이콘 사용 준비가 되셨습니까? 다음은 실제 이중 톤 마법을 시연하기위한 고급 예제입니다. 다가오는 O.W.L.을 주제로 에이스를 원하십니까? 더 많은 예를 확인하십시오.

프로젝트에서 사용

CSS 사용자 정의 속성은 여전히 대부분의 사람들에게 아주 새로운 것입니다. 다음은 프로젝트 내에서 정의 할 수있는 몇 가지 방법입니다.

CSS를 사용하여 속성 설정 : root

이중 톤 아이콘의 사용자 지정 속성은 CSS : root pseudo-class 수준에서 정의 할 수 있습니다. 포함한 모든 이중 톤 아이콘이 기본적으로 속성을 상속합니다.

<!-- by default, everything will be in the holiday spirit -->
<style>
  :root {
    --fa-primary-color: green;
    --fa-secondary-color: red;
  }
</style>

<i class="fad fa-holly-berry"></i>
<i class="fad fa-wreath"></i>
<i class="fad fa-candy-cane"></i>

프로젝트 기반 CSS 규칙을 사용하여 속성 설정

프로젝트의 CSS 내부, 페이지의 <head> 또는 별도의 스타일 시트에서 사용자 정의 속성을 설정할 수도 있습니다. 이러한 속성은 포함 된 규칙의 선택자와 일치하는 요소에만 적용됩니다.이 기술은 일반적으로 테마에 적합하며 프로젝트의 원시 HTML에 쉽게 액세스 할 수없는 경우에 유용합니다.

<!-- setting a rule for house styling -->
<style>
  .theme-slytherin {
    --fa-primary-color: darkgreen;
    --fa-secondary-color: silver;
  }
</style>

<i class="fad fa-wand-magic theme-slytherin"></i>
<i class="fad fa-scarf theme-slytherin"></i>
<i class="fad fa-book-spells theme-slytherin"></i>

인라인 스타일로 속성 설정

이 문서의 많은 예제는 요소에 style속성을 추가하여 인라인 스타일을 사용하여 CSS 사용자 정의 속성을 정의합니다. 이것은 시스템 수준에서 변경할 필요가없는 일회성 또는 사용자 지정 색상/스타일 이중 톤 아이콘에 가장 적합합니다.

<!-- using inline styles to define duotone icon custom properties -->
<i class="fad fa-crow" style="--fa-primary-color: dodgerblue; --fa-secondary-color: gold;"></i>

특이성과 캐스케이드에주의하십시오!
재정의 된 CSS 사용자 정의 속성이 서로 우선합니다. : root {}에서 속성을 정의한 다음 규칙이나 인라인에서 동일한 속성을 정의하면 : root 스타일이 재정의됩니다.

듀오톤 치트시트

속성 구문 값 노트
기본 레이어 불투명도 설정 -기본-불투명도 0 1.0 CSS 사용자 정의 속성으로 사용
보조 레이어 불투명도 설정 --fa-secondary-opacity 0 1.0 CSS 사용자 정의 속성으로 사용
기본 레이어 색상 설정 --fa-primary-color 유효한 CSScolor value CSS 사용자 정의 속성으로 사용
보조 레이어 색상 설정 --fa-secondary-color 유효한 CSScolor value CSS 사용자 정의 속성으로 사용
스왑 레이어의 불투명도 fa-swap-opacity 해당 없음 다른 Font Awesome 관련 클래스와 함께<i>에 추가하십시오.

문제 해결

CSS 의사 요소를 사용하여 이중 톤 아이콘을 사용할 수 있습니까?
예, 이중 톤 아이콘 스타일은 CSS 의사 요소와 함께 사용할 수 있습니다. 그렇게하는 것은 아이콘을 렌더링하는 기본 어려움보다 더 복잡합니다 CSS 의사 요소. 사이트 / 프로젝트의 최종 마크 업을 제어 할 수없는 사용자와 마크 업을 완전히 제어하려는 닌자에게만 권장됩니다.

쿨럭! 사용하려는 아이콘이 이중 톤 스타일로 표시되지 않습니다!
몇 가지를 다시 확인하겠습니다.

  • 이중 톤 특정 fad 스타일 접두사를 사용하고 있습니까?
  • 이중 톤 아이콘은 Font Awesome Pro에서만 사용할 수 있습니다. 버전 5.10.0 이상에 액세스 할 수있는 활성 Pro-level plan 또는 Pro 라이센스가 있는지 확인하십시오.
  • 우리는 요즘 아이콘을 꽤 자주 발표합니다. 사용하려는 새 아이콘을 쉽게 사용할 수 있도록 최신 버전과 최신 버전을 사용하고 있는지 확인하십시오.
  • 자신의 Font Awesome 사본을 호스팅하기로 결정한 경우 원하는 아이콘을 사용하는 데 필요한 모든 파일을 이동했는지 확인하십시오. 또한 HTML의<head>에서 해당 파일의 경로를 다시 확인하십시오.

도와줘요! 개별 레이어를 타겟팅 할 수 없습니다!
정의한 올바른 맞춤 속성 값을 사용하고 있는지 확인하십시오. 또한 재정의 할 수있는 맞춤 속성을 정의하지 않았는지 확인합니다 (인라인 및 맞춤 CSS에서 확인). 특정 클래스 또는 의사 요소를 대상으로 커스텀 CSS를 작성하는 것은 권장하지 않습니다. 웹 글꼴과 SVG 버전의 Font Awesome에는 약간의 차이가있어이를 어렵게 만들 수 있습니다.

이중 톤 아이콘과 함께 다른 Font Awesome 스타일을 사용할 수 있습니까?
네! 크기 조정, 고정 너비 아이콘 및 애니메이션 이중 톤 아이콘과 함께 모두 사용할 수 있습니다. SVG JS 버전의 Font Awesome을 사용하는 경우 파워 변환 및 layering을 사용하면 매우 놀라운 일을 할 수 있습니다.

이중 톤 아이콘은 어떤 브라우저에서 작동합니까?
이중 톤 아이콘은 모든 최신 웹 브라우저에서 훌륭하게 렌더링됩니다. Internet Explorer (버전 10 및 11)는 CSS 사용자 정의 속성을 지원하지 않으므로 이중 톤 아이콘은 해당 브라우저에서 계속 렌더링되지만 개별 레이어의 색상 또는 불투명도를 정의 할 수는 없습니다. 오래된 브라우저를 지원해야하는 경우 아이콘이나 그 상위 요소에서 색상을 정의하는 것이 좋습니다.

이중 톤 아이콘을 사용하여 시작하십시오!

우리의 호스팅 키트 중 하나를 사용하여 사이트의 핥기 분할에 멀티 컬러 아이콘을 표시하십시오! 직접 호스팅하거나 특정 언어로 작업해야합니까? 다른 옵션도 있습니다. 아, 그리고 당신이 직업에 맞는 것을 찾기 위해 이중 톤 아이콘의 전체 카탈로그 를 숙지하십시오.

댓글남기기

참고

Java 8 Streams 소개

2023-03-27 Link

Introduction to Java 8 Streams 원문: Introduction to Java 8 Streams 1. Overview 이 글에서는 Java 8에 추가된 새로운 기능 중 주요 기능 중 하나인 스트림에 대해 간략히 살펴보겠습니다. 스트림에 대해 설명하고 간...

Spring REST API + OAuth2 + Angular

2023-02-23 Link

방금 새로운 Learn Spring Security 강좌를 발표했는데, 여기에는 Spring Security 5의 새로운 OAuth2 스택에 초점을 맞춘 전체 자료가 포함되어 있습니다.