HTML에서 아이콘 크기 설정

이 기사에서는 HTML에서 아이콘 크기를 설정하는 방법에 대해 설명합니다.

아이콘은 웹페이지의 특정 작업을 나타내는 기호입니다. Icon Font에는 기호와 문자가 포함되어 있습니다. 아이콘을 제공하고 HTML 웹 페이지에서 사용할 수 있는 여러 아이콘 라이브러리(글꼴)가 있습니다.

웹 개발자가 자주 사용하는 대표적인 아이콘 글꼴은 Font Awesome, Bootstrap Glyphicons 및 Google의 Material Icons我>.

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

• Bootstrap Glyphicons - 래스터 이미지 형식, 벡터 이미지 형식 및 글꼴에 사용할 수 있는 흑백 아이콘 라이브러리입니다. 글꼴 형식으로 250개 이상의 글리프를 제공합니다. 웹 프로젝트에서 이러한 글꼴을 사용할 수 있지만 무료는 아닙니다.

• Google의 머티리얼 아이콘 - Google은 세트로 제공되는 "머티리얼 디자인 지침"에 따라 750개의 아이콘을 디자인했으며 이러한 아이콘을 머티리얼 디자인 아이콘이라고 합니다. 거의 모든 웹 브라우저는 이러한 아이콘을 지원합니다. 이러한 아이콘을 사용하려면 글꼴(라이브러리) 재질 아이콘을 로드해야 합니다.

아래 예시에서는 위의 아이콘 글꼴 라이브러리를 사용해 보겠습니다.

글꼴 멋진 아이콘

예

아래 예에서는

• 먼저 Font Awesome 라이브러리를 로드했습니다.

• 그런 다음 아이콘 중 하나를 사용하고 해당 아이콘 클래스의 이름을

  태그 내부의 HTML 요소에 추가합니다.

• 그런 다음 CSS를 사용하여 아이콘을 정의하고 클래스 이름과 함께 사용하여 아이콘 크기를 늘립니다.

• 크기를 100px로 선언했습니다.

출력에서 ​​볼 수 있듯이 인도 통화 아이콘을 사용하고 CSS를 사용하여 크기를 정의했습니다.

Google 머티리얼 아이콘

예

아래 예에서는

• 머티리얼 아이콘 라이브러리를 로드했습니다.

• 그런 다음 아이콘 중 하나를 사용하고 해당 아이콘 클래스의 이름을

  태그 내부의 HTML 요소에 추가합니다.

• 작업 카테고리에 속하므로 traffic이라는 아이콘을 사용했습니다.

• 그런 다음 CSS를 사용하여 아이콘을 정의하고 클래스 이름과 함께 사용하여 아이콘 크기를 늘립니다.

출력에서 볼 수 있듯이 신호등 아이콘을 사용하고 CSS를 사용하여 크기를 정의했습니다.

가이드 글리프

예

아래 예에서는

• 먼저 Bootstrap Glyphicons 라이브러리를 로드합니다.

• 그런 다음 아이콘 중 하나를 사용하고 해당 아이콘 클래스의 이름을

  태그 내부의 HTML 요소에 추가합니다.

• 이 예에서는 클래스 이름이 tree-decidious인 tree라는 아이콘을 사용하고 있습니다.

출력에서 ​​볼 수 있듯이 나무 아이콘을 사용하고 CSS를 사용하여 크기를 정의했습니다.

위 내용은 HTML에서 아이콘 크기 설정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!