생성된 아이콘 안에 텍스트를 어떻게 배치할 수 있나요?

때때로 개발자는 아이콘에 텍스트를 넣어야 할 때가 있습니다. 예를 들어 좋아요 아이콘 안에 총 좋아요 수를 추가하면 UI가 더 좋아질 수 있고, 댓글 아이콘 안에 댓글을 추가하고 아이콘에 특정 숫자를 표시하는 등의 작업을 할 수 있습니다.

HTML에서는 텍스트와 아이콘을 별도로 추가할 수 있습니다. 그런 다음 텍스트 위치를 설정하여 아이콘 중앙에 배치할 수 있습니다. 이 튜토리얼에서는 생성된 아이콘 안에 텍스트를 배치하는 다양한 예를 배웁니다.

문법

사용자는 아래 구문에 따라 텍스트 위치를 설정하고 생성된 아이콘 내에 넣을 수 있습니다.

으아악

위 구문에서 "절대" 위치는 상위 요소의 위치를 ​​기준으로 텍스트의 위치를 ​​변경합니다. 또한 텍스트를 아이콘 중앙에 배치하려면 아이콘 너비와 패딩 상단을 기준으로 텍스트 너비를 지정해야 합니다.

예제 1 (아이콘을 사용한 Ionic 프레임워크)

아래 예에서는 ionic 프레임워크를 사용하여 웹 페이지에 아이콘을 표시합니다. 여기에서는 웹 페이지에 하트 아이콘을 추가했습니다. 또한 디지털 텍스트도 추가했습니다. CSS에서는 아이콘의 글꼴 크기와 "절대" 위치를 설정합니다. 또한 텍스트가 중앙에 위치하도록 텍스트 너비와 위쪽 패딩을 설정했습니다.

출력에서 사용자는 하트 아이콘 중앙에 있는 텍스트를 볼 수 있습니다.

으아악

예 2(Font-awesome 라이브러리 사용)

아래 예에서는 글꼴 멋진 라이브러리를 사용하여 웹 페이지에 아이콘을 추가합니다. 멋진 글꼴 라이브러리에는 변경할 수 있는 텍스트가 포함된 미리 정의된 아이콘이 포함되어 있습니다.

여기에서는 스팬 요소를 사용하여 아이콘을 추가합니다. 또한 아이콘 및 텍스트 요소에 서로 다른 클래스 이름을 사용하여 텍스트 요소를 아이콘 중앙에 배치합니다.

출력에서 아이콘 내부의 텍스트를 볼 수 있습니다.

으아악

CSS를 사용하여 아이콘 내에 텍스트를 추가하는 방법을 배웠습니다. 상위 요소를 기준으로 텍스트 위치를 설정하고 패딩이나 여백을 조정해야 합니다. 또한 사용자는 CSS를 사용하여 사용자 정의 아이콘을 만들고 미리 만들어진 SVG 아이콘을 사용하는 대신 그 안에 텍스트를 배치해 볼 수 있습니다.

위 내용은 생성된 아이콘 안에 텍스트를 어떻게 배치할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!