--- url: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/getting-started/font-awesome-7' title: 'DXPR Builder의 Font Awesome 7 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T14:04:26+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'DXPR Builder는 포함된 Font Awesome Free 아이콘을 버전 6.7.2에서 7.3.1로 업데이트합니다. 페이지는 편집 없이 계속 작동합니다. 저장된 페이지의 모든 아이콘이 같은 크기, 같은 위치에 렌더링됩니다. 아이콘 자체는 다시 그려지므로 약간 다르게 보입니다. 이 페이지에서는 변경 사항을 설명하고 업데이트 후 확인해야 할 몇 가지 경우를 나열합니다.' tags: - 'Install and update' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'DXPR Builder의 Font Awesome 7' description: 'DXPR Builder는 포함된 Font Awesome Free 아이콘을 버전 6.7.2에서 7.3.1로 업데이트합니다. 페이지는 편집 없이 계속 작동합니다. 저장된 페이지의 모든 아이콘이 같은 크기, 같은 위치에 렌더링됩니다. 아이콘 자체는 다시 그려지므로 약간 다르게 보입니다. 이 페이지에서는 변경 사항을 설명하고 업데이트 후 확인해야 할 몇 가지 경우를 나열합니다.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T14:04:26+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/getting-started/font-awesome-7' articleSection: '설치 및 업데이트' - '@type': WebPage '@id': 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/getting-started/font-awesome-7' description: 'DXPR Builder는 포함된 Font Awesome Free 아이콘을 버전 6.7.2에서 7.3.1로 업데이트합니다. 페이지는 편집 없이 계속 작동합니다. 저장된 페이지의 모든 아이콘이 같은 크기, 같은 위치에 렌더링됩니다. 아이콘 자체는 다시 그려지므로 약간 다르게 보입니다. 이 페이지에서는 변경 사항을 설명하고 업데이트 후 확인해야 할 몇 가지 경우를 나열합니다.' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: 홈 item: 'https://dxpr.com/ko' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: ko --- [도움말 센터](/ko/node/75)/[문서](/ko/hc/documentation) /[DXPR Builder 배우기](/ko/hc/documentation/learn-dxpr-builder) /[여기서 시작](/ko/hc/documentation/learn-dxpr-builder/start-here) /[설치 및 업데이트](/ko/hc/documentation/learn-dxpr-builder/start-here/install) # DXPR Builder의 Font Awesome 7. DXPR Builder 배우기여기서 시작설치 및 업데이트 ## 이 가이드의 내용 관련 가이드 - [아이콘 라이브러리](/ko/hc/documentation/learn-dxpr-builder/customization/icon-libraries) - [아이콘 추가](/ko/hc/documentation/learn-dxpr-builder/elements/icon) - [DXPR Builder 업데이트](/ko/hc/documentation/learn-dxpr-builder/getting-started/updating) - [변경 로그](/ko/hc/documentation/learn-dxpr-builder/getting-started/changelog) DXPR Builder는 포함된 Font Awesome Free 아이콘을 버전 6.7.2에서 7.3.1로 업데이트합니다. 페이지는 편집 없이 계속 작동합니다. 저장된 페이지의 모든 아이콘이 같은 크기, 같은 위치에 렌더링됩니다. 아이콘 자체는 다시 그려지므로 약간 다르게 보입니다. 이 페이지에서는 변경 사항을 설명하고 업데이트 후 확인해야 할 몇 가지 경우를 나열합니다. ## 페이지의 변경 사항 - **새 아이콘 디자인.** Font Awesome 7은 아이콘을 더 굵고 둥근 모양으로 다시 그립니다. 일반(외곽선) 아이콘은 선이 두꺼워집니다. 브랜드 로고는 거의 바뀌지 않습니다. - **같은 레이아웃.** Font Awesome 7은 기본적으로 모든 아이콘에 고정 너비를 지정하므로 좁은 아이콘이 오른쪽으로 이동합니다. DXPR Builder는 페이지와 에디터에서 Font Awesome 6 동작을 유지하므로 아이콘의 위치와 간격이 유지됩니다. house나 truck처럼 다시 그려진 일부 아이콘은 약간 좁습니다. 소셜 링크처럼 `fa-fw` 클래스가 있는 아이콘은 이전처럼 고정 너비를 유지합니다. - **같은 클래스 이름.** 저장된 페이지는 `fas fa-house` 같은 아이콘 클래스를 유지합니다. Font Awesome 4와 5의 클래스는 호환 스타일을 통해 계속 작동하며, 여전히 같은 464개의 이전 이름을 지원합니다. ## 변경 전후 각 타일에는 하나의 아이콘이 두 번 표시됩니다. 왼쪽의 회색 아이콘은 Font Awesome 6.7.2, 오른쪽의 검정 아이콘은 Font Awesome 7.3.1입니다. ## 새 아이콘 아이콘 선택 도구에 이제 1895개에서 늘어난 1992개의 무료 아이콘이 나열됩니다. | 스타일 | Font Awesome 6.7.2 | Font Awesome 7.3.1 | |---|---|---| | 솔리드 | 1402 | 1422 | | 일반 | 163 | 169 | | 브랜드 | 495 | 572 | 103개의 새 아이콘에는 Claude, Copilot, Gemini, Fediverse, Codeberg, Forgejo 같은 브랜드 로고와 별자리가 포함됩니다. ## 이름이 바뀐 아이콘과 제거된 아이콘 다섯 아이콘의 이름이 바뀌었습니다. Font Awesome 7이 이전 이름을 계속 허용하므로 이전 이름을 사용하는 페이지에도 아이콘이 계속 표시됩니다. 아이콘 선택 도구에는 새 이름만 표시됩니다. | 이전 이름 | 새 이름 | |---|---| | `user-large` | `user` | | `user-large-slash` | `user-slash` | | `headphones-simple` | `headphones` | | `handshake-simple` | `handshake` | | `handshake-simple-slash` | `handshake-slash` | 하나의 아이콘이 무료 집합에서 제외됩니다. `vector-square`. Font Awesome 7은 유료 Pro 에디션에서만 제공하므로 `fa-vector-square`를 사용하는 페이지는 업데이트 후 아이콘이 표시되지 않습니다. `draw-polygon`이나 `object-group` 같은 무료 아이콘으로 교체합니다. ## 변하지 않는 항목 - **라이선스.** Font Awesome Free는 같은 조건을 유지합니다. 아이콘은 CC BY 4.0, 글꼴은 SIL OFL 1.1, 코드는 MIT를 사용합니다. - **라이브러리 이름.** Drupal 라이브러리는 저장된 페이지와 사용자 정의 코드가 참조하므로 머신 이름을 유지합니다. `dxpr_builder/elements.font_awesome_6_free`. 이제 Font Awesome 7을 로드합니다. - **브라우저 지원.** Font Awesome 7은 WOFF2 글꼴만 제공합니다. DXPR Builder가 지원하는 모든 브라우저는 WOFF2를 읽습니다. ## 업데이트 후 사이트 확인 1. **콘텐츠에서 `fa-vector-square`**를 검색하고 위에서 설명한 대로 교체합니다. 2. **Font Awesome 아이콘을 직접 그리는 사용자 정의 테마 CSS를 확인합니다.** Font Awesome 7은 글꼴 이름을 “Font Awesome 7 Free”와 “Font Awesome 7 Brands”로 바꿉니다. `font-family`를 “Font Awesome 6 Free”나 “Font Awesome 6 Brands”로 설정하고 `content` 코드 포인트를 함께 사용하는 CSS는 아이콘 표시를 중단합니다. 새 이름을 사용하거나 Font Awesome 7이 제공하는 `--fa-family-classic`과 `--fa-family-brands` 사용자 정의 속성을 사용합니다. 3. **테마 마크업 중 `sr-only`에 의존하는 항목을 확인합니다.** Font Awesome 6은 `sr-only` 클래스를 정의했지만 Font Awesome 7은 정의하지 않습니다. 테마가 해당 클래스로 숨긴 텍스트가 표시됩니다. Bootstrap 5 테마는 대신 `visually-hidden`을 사용할 수 있습니다. 4. **DXPR Builder 콘텐츠 외부의 테마 아이콘을 확인합니다.** 메뉴나 푸터처럼 DXPR Builder 페이지 외부에서 테마가 렌더링하는 아이콘은 Font Awesome 7의 고정 너비를 따릅니다. 해당 위치에서도 이전 너비를 유지하려면 컨테이너에 `--fa-width: auto`를 설정합니다. 5. **캐시를 지웁니다.** `drush cr`를 실행하고 CDN이나 리버스 프록시 캐시를 제거하여 방문자가 새 스타일시트와 글꼴을 받도록 합니다. ## 다음 단계 - [아이콘 라이브러리](/ko/hc/documentation/learn-dxpr-builder/customization/icon-libraries): DXPR Builder에 포함된 아이콘 세트와 역할별 제한 방법. - [아이콘 추가](/ko/hc/documentation/learn-dxpr-builder/elements/icon): 페이지에 아이콘을 배치하고 스타일을 지정합니다. - [DXPR Builder 업데이트](/ko/hc/documentation/learn-dxpr-builder/getting-started/updating): 모듈을 안전하게 업데이트합니다. - [변경 로그](/ko/hc/documentation/learn-dxpr-builder/getting-started/changelog): 각 릴리스의 변경 사항.