DXPR Builder의 Font Awesome 7.

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개의 무료 아이콘이 나열됩니다.

103개의 새 아이콘에는 Claude, Copilot, Gemini, Fediverse, Codeberg, Forgejo 같은 브랜드 로고와 별자리가 포함됩니다.

이름이 바뀐 아이콘과 제거된 아이콘

다섯 아이콘의 이름이 바뀌었습니다. Font Awesome 7이 이전 이름을 계속 허용하므로 이전 이름을 사용하는 페이지에도 아이콘이 계속 표시됩니다. 아이콘 선택 도구에는 새 이름만 표시됩니다.

하나의 아이콘이 무료 집합에서 제외됩니다. 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이나 리버스 프록시 캐시를 제거하여 방문자가 새 스타일시트와 글꼴을 받도록 합니다.

다음 단계

• 아이콘 라이브러리: DXPR Builder에 포함된 아이콘 세트와 역할별 제한 방법.
• 아이콘 추가: 페이지에 아이콘을 배치하고 스타일을 지정합니다.
• DXPR Builder 업데이트: 모듈을 안전하게 업데이트합니다.
• 변경 로그: 각 릴리스의 변경 사항.