웹 아이콘-소개

아이콘은 웹 페이지에서 특정 작업이나 기능을 나타내는 데 사용되는 기호입니다. 아이콘은 문서 및 응용 프로그램에서 사용되며 선택 가능하거나 선택 불가능할 수 있습니다. 예를 들어 응용 프로그램의 버튼에 표시되는 이미지는 모두 아이콘이며 이러한 버튼을 선택할 수 있습니다. 마찬가지로 회사 로고로 아이콘을 사용하는 경우 일반적으로 선택할 수 없습니다.

Windows 환경에서 시스템 볼륨을 음소거하면 아래와 같이 아이콘으로 표시됩니다.

웹 아이콘을 사용하여 로딩 페이지, 비활성화 된 옵션, 링크, 리디렉션 등을 나타낼 수 있습니다. 이러한 아이콘은 뒤집기, 회전, 크기 조정, 테두리, 반전 및 색상을 지정할 수 있습니다.

아이콘 글꼴

아이콘 글꼴에는 기호와 글리프가 포함됩니다. 원하는 글꼴을로드하면 아이콘의 클래스 이름을 사용하여 해당 글꼴에서 제공하는 아이콘을 사용할 수 있습니다. 아이콘에 다른 색상을 적용하고 CSS 속성을 사용하여 크기를 조정할 수도 있습니다. 아이콘을 제공하는 아이콘 라이브러리 (글꼴)는 여러 가지가 있습니다. 이 튜토리얼은 세 가지 주요 글꼴에 중점을 둡니다.

• 멋진 글꼴
• 부트 스트랩 글 리피 콘
• 구글의 머티리얼 아이콘

멋진 글꼴

이 글꼴은 519 개의 무료 확장 가능한 벡터 아이콘을 제공합니다. 이 라이브러리는 개인용 및 상업용으로 완전히 무료입니다. 이러한 아이콘은 쉽게 사용자 지정할 수 있습니다. 원래는 Bootstrap 용으로 개발되었습니다.

부트 스트랩 글 리피 콘

래스터 이미지 형식, 벡터 이미지 형식 및 글꼴로 사용할 수있는 단색 아이콘 라이브러리입니다. 250 개 이상의 글리프를 글꼴 형식으로 제공합니다. 웹 프로젝트에서 이러한 글꼴을 사용할 수 있습니다. 이 아이콘은 무료는 아니지만 구매하지 않고도 Bootstrap 기반 프로젝트에서 사용할 수 있습니다.

구글의 머티리얼 아이콘

Google은 '소재 디자인 가이드 라인'에 따라 디자인 된 약 750 개의 아이콘을 제공하며 Material Design아이콘. 이 아이콘은 간단하며 모든 최신 웹 브라우저를 지원합니다. 이러한 아이콘은 벡터 기반이므로 확장 가능합니다. 이 아이콘을 사용하려면 글꼴 (라이브러리)을로드해야합니다.material-icons.