부트스트랩 아이콘을 표시할 수 없는 이유

부트스트랩에서 소개하는 CSS 및 글꼴 사양을 주의하지 않으면 부트스트랩에서 글리피콘 아이콘을 정상적으로 표시하지 못하여 박스 형태로 표시될 수 있습니다.

표시할 수 없는 것을 발견한 후 goole cdn에 있는 주소를 사용하여 부트스트랩 파일을 가져와서 정상적으로 표시될 수 있음을 확인했습니다. 따라서 가져온 파일에서 문제가 발생해야 합니다.
ctrl + 마우스 왼쪽 버튼을 클릭하여 glyphyicon을 입력한 결과 구현된 코드가 다음과 같은 것을 확인했습니다. (권장 학습: Bootstrap 비디오 튜토리얼)

@font-face {
 font-family: 'Glyphicons Halflings';
 
 src: url('../fonts/glyphicons-halflings-regular.eot');
 src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon {
 position: relative;
 top: 1px;
 display: inline-block;
 font-family: 'Glyphicons Halflings';
 font-style: normal;
 font-weight: normal;
 line-height: 1;
 
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

찾을 것입니다. idea@에서 글꼴 부분이 빨간색으로 보고되고 glyphicons-halflings-regular.eot 및 glyphicons-halflings-regular.eot 파일을 확인할 수 없다는 메시지가 표시됩니다. 이는 파일을 찾을 수 없음을 의미합니다.

그래서 glyphyicon 스타일은 이러한 파일과 연결되어 있습니다. 다운로드한 전체 압축 패키지를 입력하고 bootstrap-3.3.7-distfonts 파일을 입력하면 다음 파일을 찾을 수 있습니다:

보통 경로가 잘못되어 오류가 발생합니다.

그렇게 분석해 보니 글꼴 아이콘 스타일의 구현이 glyphyicon 관련 파일과 연결되어야 한다는 뜻입니다. bootstrap.css 파일을 소개하면, bootstrap.css의 상대 경로를 통해 관련 파일을 찾을 수 있는지 확인해야 하며, CDN 서버에서는 공식적으로 이러한 경우이므로 아이콘이 정상적으로 표시될 수 있습니다.

Bootstrap Tutorial 열을 방문하여 알아보세요!

위 내용은 부트스트랩 아이콘을 표시할 수 없는 이유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!