아이콘 단추 CSS 스타일 안내서

This is the tenth post in a series examining modern CSS solutions to problems I've been solving over the last 13+ years of being a frontend developer. Visit ModernCSS.dev to view the whole series and additional resources.

이 안내서는 지난 회"CSS Button Styling Guide"를 토대로 아이콘 단추의 용례를 탐색합니다.아이콘 + 텍스트 및 아이콘 전용 단추를 소개합니다.

Note: With SVG now having excellent support, the preferred practice is to use it for icon systems vs. icon fonts. We will not dive into SVGs specifically, but we will assume SVG icons are in use.

아이콘 + 텍스트 버튼

우선, 현재 단추를 더욱 쉽게 확장하고, 텍스트 옆에 svg 아이콘을 설치합니다.

<a href="javascript:;" class="button">
  <svg class="button__icon" xmlns="http://www.w3.org/2000/svg" 
viewBox="0 0 32 32" aria-hidden="true" focusable="false">
    <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
  </svg>
  Button Link
</a>

SVG는 아이콘 + 텍스트 용례의 3가지 주요 기능을 제공합니다.

신규 button__icon 클래스 사용

viewBox값은 아이콘 경계와 밀접하게 연결되어 있으며 이상적인 경우 정방형이며 이러한 값(예: 24과32

라도 아이콘 세트에서 최상의 결과를 얻을 수 있습니다.

장애가 없는 경우 다음 사항을 적용합니다.

aria-hidden="true" - 보조 기술이 SVG를 건너뛸 수 있도록 합니다. 장식적이며 보이지 않는 단추 텍스트에 대한 의미 값을 제공하지 않기 때문입니다

focusable="false" - 일부 버전의 IE

에서 이중 초점 이벤트를 방지합니다.

For more on accessibility of icon buttons: Read this excellent article by Sara Soueidan who is an expert on both accessibility and SVGs

아이콘 + 텍스트의 아이콘 스타일

기본display: inline-flex에 적용되고 SVG에 .button 속성이 없기 때문에 기본적으로 아이콘이 보이지 않습니다.
따라서 우선 새로운 width 클래스에 차원을 추가하고 .button__icon 단원을 사용하여 사용 중인 em 클래스에 비해 상대성을 유지합니다.

.button__icon {
  // You may wish to have your icons appear larger
  // or smaller in relation to the text
  width: 0.9em;
  height: 0.9em;
}

the spec default에 따르면 font-size를 포함한 SVG 부품에는 검은색path이 있습니다.이를 조정하기 위해 특수 키워드fill를 사용하여 버튼의 적용 텍스트currentColor를 SVG로 확장합니다.

.button__icon {
  // ...existing styles
  fill: currentColor;
}

마지막으로 조정해야 할 것은 아이콘과 단추 텍스트 사이에 약간의 간격을 추가하는 것입니다. color 단원을 사용하여 이 간격을 다시 적용합니다.

.button__icon {
  // ...existing styles
  margin-right: 0.5em;
}

아이콘을 텍스트 뒤나 단추의 끝에 놓을 수 있도록 유틸리티 클래스를 추가해야 합니다. (오른쪽에서 왼쪽으로 가는 언어에 대해)기존 여백을 0으로 설정한 다음 왼쪽으로 뒤집습니다.

.button__icon {
  // ... existing styles

  &--end {
    margin-right: 0;
    margin-left: 0.5em;
  }
}

<a href="javascript:;" class="button">
  Button Link
  <svg class="button__icon button__icon--end" xmlns="http://www.w3.org/2000/svg" 
viewBox="0 0 32 32" aria-hidden="true" focusable="false">
    <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
  </svg>
</a>

아이콘 버튼만

우리는 아이콘 단추 외에 두 개의 일반 단추가 필요하다고 가정한다. (아이콘이 있거나 아이콘이 없거나)이것은 매우 중요하다. 왜냐하면 우리는 새로운 클래스를 제외하고 em 클래스를 다시 사용할 것이기 때문에 리셋과 기본 시각 스타일을 재정의할 필요가 없다.덮어쓰기가 가장 작습니다.

<a href="javascript:;" class="button icon-button" aria-label="Icon-only Button">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" 
aria-hidden="true" class="icon-button__icon" aria-hidden="true" focusable="false">
    <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
  </svg>
</a>

아이콘 + 텍스트 버튼 변경:

클래스 추가.button

시각적 텍스트를 삭제했기 때문에 접근 가능한 텍스트 대체를 제공하기 위해 추가icon-button

SVG에서 클래스 교환a

Important: the value of the aria-label should describe what the button does not what the icon is. For further reading and other ways to provide a text alternative, see Sara Soueidan's article

다음은 우리가 조정하기 전에 얻은 결과입니다. - 비어 보이는 단추입니다. 왜냐하면 우리는 무폭 문제로 돌아왔기 때문입니다.

우선, 새로운 종류를 만듭니다.이 규칙은 aria-label="Icon-only Button" 규칙 뒤에 있어야 하기 때문입니다.

.icon-button {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  padding: 0.35em;

  &__icon {
    width: 100%;
    height: 100%;
    fill: currentColor;
  }
}

우리는 당신의 디자인 요구에 따라 완전히 조정할 수 있는 새로운 icon-button__icon 및 .button 을 정의했습니다. 그러나 이것은 정사각형과 같아야 합니다.이렇게 하면 적용width 시 원 모양을 생성할 수 있습니다.
그리고 SVG 아이콘과 버튼 경계 사이에 숨쉬는 공간을 추가하기 위해 채우기(입맛/디자인 요구 사항에 맞음)를 추가했습니다.
다음으로 우리는 height류를 정의한다.이곳의 차이점은 우리가 희망하는 것border-radius: 50%과 icon-button__icon이 용기와 일치하기 때문에 우리는 그것을 width로 설정한다.이것은 height 클래스의 100% 속성만 재정의하여 여러 크기의 아이콘 단추로 확장할 수 있습니다.
다음과 같이 진행됩니다.

이것은 우리가 원하는 것이 아니지만, 우리는 font-size 클래스에서 다음과 같은 속성을 조정해서 그것을 복원할 수 있다.일반 버튼에만 사용되는 속성을 제외하려면 .icon-button 선택기를 사용합니다.

.button {
  // ...existing styles

  // Find these styles and update, not duplicate:
  &:not(.icon-button) {
    padding: 0.25em 0.75em;
    min-width: 10ch;
    min-height: 44px;
  }
}

이제 우리는 우리가 원하는 것이 생겼다.

프레젠테이션

이전 세트에서 만든 .button 클래스와 "real 단추"를 사용하여 스타일이 이 두 요소에 똑같이 유효한지 확인합니다.

Try out ButtonBuddy to create accessible button colors. This web app I created will help get all the vectors of contrast right across your button color palette.