HTML에서 아이콘 크기 설정
- 王林앞으로
- 2023-09-03 11:29:061734검색
이 기사에서는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!