>웹 프론트엔드 >CSS 튜토리얼 >Bootstrap과 독립적으로 Bootstrap Glyphicon을 어떻게 사용할 수 있습니까?

Bootstrap과 독립적으로 Bootstrap Glyphicon을 어떻게 사용할 수 있습니까?

Barbara Streisand
Barbara Streisand원래의
2024-11-03 20:53:03717검색

How can I use Bootstrap Glyphicons independently from Bootstrap?

Twitter Bootstrap Glyphicons CDN Returns

최근 합병 풀 요청 이후 Bootstrap의 유명한 Glyphicons 아이콘 글꼴이 기본 저장소에 다시 통합되었습니다. 아이콘은 UI 탐색 및 이해에서 중요한 역할을 하기 때문에 이는 사용자 인터페이스 디자인의 기본 요소를 복원합니다.

Bootstrap Glyphicons용 CDN URL

현재 Bootstrap 3.0 CDN Glyphicon을 포함하여 완전한 Bootstrap 3.0 CSS를 호스팅합니다. HTML에서는 다음 참조를 사용하여 Glyphicon을 포함할 수 있습니다.

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

CSS의 경우 다음 import 문을 사용하세요.

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");

Glyphicon을 독립적으로 사용

전체 Bootstrap 프레임워크를 활용하지 않는 프로젝트의 경우 Glyphicon은 Bootstrap CDN을 통해 별도로 참조할 수 있습니다.

HTML:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

CSS:

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");

추가 고려 사항

Bootstrap과 별도로 Glyphicon을 사용하는 경우 필요한 종속성이 Bootstrap CDN의 상대 경로에 포함되어 있는지 확인하세요. 또한 .glyphicon 클래스가 .icon 클래스를 대체했습니다.

사용 예

하트 아이콘을 사용하려면 .icon-heart를 .glyphicon-heart로 바꾸세요.

<span class="glyphicon glyphicon-heart"></span>

JavaScript 구성 요소 통합을 위해서는 bootstrap.min.js를 별도로 포함해야 합니다.

위 내용은 Bootstrap과 독립적으로 Bootstrap Glyphicon을 어떻게 사용할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.