글꼴이 훌륭해요

프로젝트에 Font Awesome을 포함합니다:
HTML의

아이콘 사용

아이콘을 사용하려면 적절한 클래스와 함께 또는 요소를 추가하세요.

재료 아이콘

프로젝트에 머티리얼 아이콘을 포함합니다:
HTML의

아이콘 사용

아이콘을 사용하려면 클래스 Material-icons 및 아이콘 이름이 있는 요소를 추가하세요.

camera_alt

2. 사용자 정의 아이콘에 CSS 사용

CSS를 사용하여 나만의 아이콘을 만들 수도 있습니다. 다음은 순수 CSS를 사용한 간단한 예입니다.

기본 HTML 구조 만들기

CSS를 추가하여 아이콘 스타일 지정

.icon-star {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid gold;
    position: relative;
    transform: rotate(35deg);
}


.icon-star:before {
    content: '';
    position: absolute;
    top: 0;
    left: -50px;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid gold;
    transform: rotate(-70deg);
}

이 CSS 스니펫은 테두리와 위치 지정을 사용하여 간단한 별 모양을 만듭니다.

3. SVG 아이콘

고품질 아이콘에 SVG를 사용할 수도 있습니다.

인라인 SVG

SVG를 배경 이미지로 사용

.icon {
    width: 24px;
    height: 24px;
    background: url('data:image/svg xml;base64,...') no-repeat center center;
    background-size: contain;
}

팁

크기 및 색상: 글꼴 아이콘 및 인라인 SVG의 경우 글꼴 크기 또는 너비 및 높이 속성을 사용하여 크기를 조정하고 SVG의 경우 색상 또는 채우기로 색상을 변경할 수 있습니다.
접근성: 필요한 경우 설명 텍스트나 아리아 속성을 추가하여 항상 접근성을 고려하세요.
다양한 방법을 자유롭게 실험하고 혼합하여 프로젝트에 가장 적합한 방법을 찾으세요!