집 >웹 프론트엔드 >부트스트랩 튜토리얼 >부트스트랩 아이콘을 표시할 수 없는 이유
부트스트랩에서 소개하는 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 스타일을 glyphicons-halflings-regular.eot와 같은 파일과 연결해야 정상적으로 사용할 수 있습니다.보통 경로가 잘못되어 오류가 발생합니다.
그렇게 분석해 보니 글꼴 아이콘 스타일의 구현이 glyphyicon 관련 파일과 연결되어야 한다는 뜻입니다. bootstrap.css 파일을 소개하면, bootstrap.css의 상대 경로를 통해 관련 파일을 찾을 수 있는지 확인해야 하며, CDN 서버에서는 공식적으로 이러한 경우이므로 아이콘이 정상적으로 표시될 수 있습니다.
Bootstrap과 관련된 더 많은 기술 기사를 보려면Bootstrap Tutorial 열을 방문하여 알아보세요!
위 내용은 부트스트랩 아이콘을 표시할 수 없는 이유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!