아이콘 링크
아이콘 링크 (Icon link)
.icon-link 헬퍼로 텍스트와 아이콘을 나란히 배치한 링크를 만드는 방법과 커스터마이즈 방법을 설명하는 문서예요.
출처: 문서
본문
아이콘 링크 헬퍼 컴포넌트는 기본 링크 스타일을 수정해서 모양을 돋보이게 하고, 아이콘과 텍스트의 어떤 조합이든 빠르게 정렬해 줘요. 정렬은 인라인 flexbox 스타일과 기본 gap 값으로 설정돼요. 밑줄은 커스텀 오프셋과 색상으로 스타일을 입혀요. 아이콘은 연결된 텍스트의 font-size에 가장 잘 맞도록 1em으로 자동 크기 조정돼요.
아이콘 링크는 Bootstrap Icons를 사용한다고 가정하지만, 원하는 아이콘이나 이미지를 무엇이든 사용할 수 있어요.
아이콘이 순전히 장식용일 때는 예시에서처럼 aria-hidden="true"로 보조 기술에서 숨겨야 해요. 의미를 전달하는 아이콘에는 SVG에 role="img"와 적절한 aria-label="..."을 추가해서 적절한 텍스트 대안을 제공하세요.
예시 (Example)
일반 <a> 요소에 .icon-link를 추가하고 링크 텍스트의 왼쪽이나 오른쪽에 아이콘을 넣으세요. 아이콘은 자동으로 크기·위치·색상이 지정돼요.
<a class="icon-link" href="#">
<svg xmlns="http://www.w3.org/2000/svg" class="bi" viewBox="0 0 16 16" aria-hidden="true">
<path d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2l-2.218-.887zm3.564 1.426L5.596 5 8 5.961 14.154 3.5l-2.404-.961zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z"/>
</svg>
Icon link
</a>
<a class="icon-link" href="#">
Icon link
<svg xmlns="http://www.w3.org/2000/svg" class="bi" viewBox="0 0 16 16" aria-hidden="true">
<path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
</svg>
</a>
호버 시 스타일 (Style on hover)
.icon-link-hover를 추가하면 호버 시 아이콘이 오른쪽으로 이동해요.
<a class="icon-link icon-link-hover" href="#">
Icon link
<svg xmlns="http://www.w3.org/2000/svg" class="bi" viewBox="0 0 16 16" aria-hidden="true">
<path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
</svg>
</a>
커스터마이즈 (Customize)
아이콘 링크 스타일은 링크 CSS 변수, Sass 변수, 유틸리티, 또는 커스텀 스타일로 수정할 수 있어요.
CSS 변수 (CSS variables)
필요에 따라 --bs-link-*와 --bs-icon-link-* CSS 변수를 수정해서 기본 모양을 바꿀 수 있어요.
--bs-icon-link-transform CSS 변수를 재정의해서 호버 transform을 커스터마이즈하세요.
<a class="icon-link icon-link-hover" style="--bs-icon-link-transform: translate3d(0, -.125rem, 0);" href="#">
<svg xmlns="http://www.w3.org/2000/svg" class="bi" viewBox="0 0 16 16" aria-hidden="true">
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
</svg>
Icon link
</a>
--bs-link-* CSS 변수를 재정의해서 색상을 커스터마이즈하세요.
<a class="icon-link icon-link-hover" style="--bs-link-hover-color-rgb: 25, 135, 84;" href="#">
Icon link
<svg xmlns="http://www.w3.org/2000/svg" class="bi" viewBox="0 0 16 16" aria-hidden="true">
<path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
</svg>
</a>
Sass 변수 (Sass variables)
아이콘 링크 Sass 변수를 커스터마이즈하면 Bootstrap 기반 프로젝트 전체의 모든 아이콘 링크 스타일을 수정할 수 있어요.
$icon-link-gap: .375rem;
$icon-link-underline-offset: .25em;
$icon-link-icon-size: 1em;
$icon-link-icon-transition: .2s ease-in-out transform;
$icon-link-icon-transform: translate3d(.25em, 0, 0);
Sass 유틸리티 API (Sass utilities API)
밑줄 색상과 오프셋을 수정하기 위한 링크 유틸리티 중 아무거나 사용해서 아이콘 링크를 수정할 수 있어요.
<a class="icon-link icon-link-hover link-success link-underline-success link-underline-opacity-25" href="#">
Icon link
<svg xmlns="http://www.w3.org/2000/svg" class="bi" viewBox="0 0 16 16" aria-hidden="true">
<path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
</svg>
</a>